javascript - ng-click 上的 Angular 工厂原型(prototype)分离

Question

我有一个工厂，有一系列需要能够相互调用的原型(prototype)。问题是使用 ng-click 时，对“this”的引用被应用于 html 模板，而不是原始工厂类。

这是一个例子:

angular.factory('myFactory', function(){
    function FactoryA(){}
    FactoryA.prototype.hello = function(){ console.log('Hello') };
    FactoryA.prototype.useHello = function(){ this.hello() };

    return FactoryA;
}

Controller 会将工厂设置为 $scope 变量“myFactory”。

ng-click 将从 html 模板中这样调用:

<button type="button" ng-click="myFactory.useHello()">Hello</button>

问题在于 myFactory.useHello 上下文中的“this”被 html 模板引用替换，并失去了与 FactoryA 及其其他原型(prototype)的链接。

如何保持 ng-click 函数与工厂类及其其他原型(prototype)关联？

Answer 1

您可以将工厂方法绑定(bind)到自身来避免该问题，但这是一个糟糕的解决方法。

正如 @ste2425 所说，您应该在 Controller 中声明一个处理程序，它将执行对服务方法的调用并在模板中使用此处理程序:

<button type="button" ng-click="useHello()">Hello</button>

在你的 Controller 中:

$scope.useHello = function() {
    myFactory.useHello();    
}

此外，对工厂/服务使用原型(prototype)声明(设计上是单例的)有点无用。