使用Angular服务和JavaScript类(在类中访问服务，或者在Angular框架中修改类)

Working with Angular Services and JavaScript Classes (accessing services within Class, or reworking class to be within Angular framework)

本文关键字：服务 Angular 或者 框架 修改 访问 使用 JavaScript      更新时间：2023-09-26

我想这是一个两部分的问题;但我先解释一下我遇到的问题。

我有一个Angular项目和3个类，它们不是Angular框架的"一部分"。第一个问题是，是否建议在这些类中拉取一个Angular的实例，只是为了从单例服务中获取某些数据。

第二，有没有办法把这些类更深入地"整合"到Angular框架中。我不想把它们创建为服务，因为它们不是单例的。

这真是令人沮丧，因为在Angular中获取服务是如此容易——比如。只是把它的引用传递给一个控制器。对于外部(Angular框架的外部)类/对象，我没有可以传递的引用。而且，所讨论的类/对象并没有在Angular内部被调用/初始化，所以我不能直接传递服务引用。

想法?

你有很多选择(这也是我喜欢Angular的原因之一)。你可以在模块外部创建它们，然后在配置块中分配它们，或者使用angular.element()来获取其作用域，如下所示:

<div ng-controller="MyCtrl" id='hi'>{{name | show}}! {{name2}}</div>

JS 

 //object 'something' with  some method show that returns a formatted message
 var something = (function () {
     return {
         show: function (s) {
             return 'show ' + s;
         }
     }
 })();
 ///controller
 function MyCtrl($scope) {
     $scope.name = 'Mitch';
     $scope.name2 = '';
 }
 //module
 angular.module('myApp', []).
 value('a', something). //assignment of object to be used within module scope
 filter('show', function (a) { //object something being used in this filter
     return function (val) {
         return a.show(val);
     };
 });
 ///Using the scope from a known element that uses a controller
 $(function () {
     var scope = angular.element('#hi').scope();
     scope.$apply(function () {
         //using the object again to change a value with the something object formatting the value.
         scope.name2 = something.show('Mitch2');
     });
 });

上面代码的提琴

就我个人而言，如果对象或函数已经在其他地方创建，并且在应用程序的其他非angular相关部分中使用，我会选择配置块。然后，这个共享实例会像服务一样被传递给任何指令、过滤器(就像在这个例子中一样)等。

我最终使用了下面的代码，它给了我Angular应用的活动实例，并让我获取了我需要的服务单例。

var injector = angular.element('html').injector(),
               dataService = injector.get('data');

再次感谢@mitch提供的备选方案。

相关文章：