【问题标题】:Where to put user defined functions in Angular JS?在 Angular JS 中将用户定义的函数放在哪里?
【发布时间】:2012-09-10 22:00:48
【问题描述】:

在我看来,我想渲染:

<p>
  {{ say() }}
</p>

say 的定义如下:

say = function() {
  return "Hello World";
}

我可以在我的控制器中定义它:

function TestCtrl($scope) {
  $scope.say = function() { ... };
}

但它只能在该控制器内访问。

如果我在 Angular 文件结构之外定义函数,它不会呈现任何内容。如果我在我的 controllers.js 文件中定义它,但在控制器功能范围之外。

在哪里放置我的函数的合适位置,以便我可以在任何控制器中呈现它?

【问题讨论】:

    标签: javascript model-view-controller scope angularjs


    【解决方案1】:

    一种方法是create a service 使用您想要在多个控制器之间共享的功能。请参阅this post 了解更多信息。

    完成此操作后,您可以将创建的服务注入任何控制器并使用类似以下代码访问say() 函数:

    function TestCtrl($scope, myService){
       $scope.say = myService.say;
    }
    

    您将myService 定义为:

    angular.module('myApp', [])
        .factory('myService', function () {
            return {
                say: function () {
                    return "Hello World";
                }
            }
        });
    

    这是jsFiddle 的示例。

    【讨论】:

    • 太棒了...我期待它与服务一起使用,但找不到添加它的语法
    • 仅供参考,另一种语法(如果我只需要构造函数,我更喜欢查看/阅读“服务”而不是“工厂”): .service('myService', function () { this. say = function () { return "Hello World"; } });
    • 正确服务的“问题”是每次使用该服务时,都会获得该服务的一个新实例。在这种情况下,这可能不是最好的主意。
    • @Spock 是的,所以也许 Angular 应该添加类似“singleton bean”的东西。