javascript - 在 AngularJS 中添加一个自动执行的匿名函数来扩展 Sir Trevor，同时访问 $

Question

我有一个使用 AngularJS 编写的应用程序(我对此非常陌生)，并且在我的应用程序中我使用 Sir Trevor 内容编辑器。我需要扩展 Sir Trevor 内容编辑器以包含我编写的一些自定义 block 。一切都很好，但是我需要在扩展代码中使用 Angular 服务(以 $ 开头的内容，例如 $translate)。

现在，在我的应用程序中，我的 Sir Trevor 扩展代码仅包含在一个具有自动执行匿名函数的文件中，如下所示...

(function() {

    // check SirTrevor exists...
    if(SirTrevor){

        SirTrevor.Blocks.NewBlock = SirTrevor.Block.extend({

        // yadda yadda

        })

        SirTrevor.Blocks.AnotherNewBlock = SirTrevor.Block.extend({

        // blah blah blah

        })
     }

})()

现在，当我尝试将我的 Angular 方法作为参数传递给函数时，它不会被识别，因为它不存在。因此，我需要将我的自动执行匿名函数放在可以访问 Angular 服务的地方。 .directive 不适合，因为我不想向 HTML 添加标签或属性，并且我只想执行此代码一次。该代码似乎不适合 .factory 因为我不返回对象，而且我的代码不是单例，所以 .service 已经出局了，我不确定我会在哪里调用/调用它？我应该在哪里或如何执行我的代码，以便我可以访问/注入(inject) Angular 服务？

有人有什么想法吗？

顺便说一句:我无法将新代码添加到 SirTrevor.js，因为下次更新依赖项或运行 bower install 时它将被覆盖。

Answer 1

你说得完全正确。这纯粹是为了配置，因此它不适合下面的任何组件。

• 指令，用于 DOM 操作
• Service，它返回一个将使用 new 运算符调用的单例对象。
• 工厂，返回一个单例对象。

它也可能在 .config() block 中工作，但我会使用 .run() block 。请参阅Module documentation .

示例

(function(angular, SirTrevor) {

    angular.module('myApp', [])
        .run(['$http', function($http) {

            // $http is injected by Angular.

            if (SirTrevor) {
                SirTrevor.Blocks.NewBlock = SirTrevor.Block.extend({
                    // Whatever here...
                });

                SirTrevor.Blocks.AnotherNewBlock = SirTrevor.Block.extend({
                    // Whatever here...
                });
            }
        }]);

})(angular, SirTrevor);