1

我有几个功能在不同的控制器中使用,而不是复制并粘贴多次到控制器,我想把它拉出并放在工厂。依赖注入功能与工厂(AngularJS)

但是,当我尝试通过Angular {{expressions}}调用HTML中的函数时,它不起作用。

相反,我在每个控制器的$范围内调用了工厂函数,所以DOM可以读取表达式 - 但这似乎是多余的。有没有办法解决这个问题,所以我可以简单地调用工厂的函数?

这里是我最初曾尝试:

的index.html

<div ng-controller="MyController"> 
    The rating of this item is: {{MakeGraph.getRating(whichItem)}}<br /> 
    The votes of this item is: {{MakeGraph.getVotes(whichItem)}} 
</div> 

MyController.js

controllers.controller('MyController', ['$scope', 'MakeGraph', '$routeParams', function($scope, MakeGraph, $routeParams){ 
    $scope.whichItem = $routeParams.itemId; 
    //no other reference to MakeGraph here 
}]) 

factory.js

app.factory('MakeGraph', function(){ 
    var service = {}; 

    service.getRating = function(itemNo){ 
     ... 
     return ...; 
    }; 

    service.getVotes = function(itemNo){ 
     ... 
     return ...; 
    }; 

    return service; 

}); 

相反,我只能得到它的工作时,我改变对myController的有这样的事情:

$scope.getRating = function(){ 
    return MakeGraph.getRating(itemNo); 
}; 

我能解决这个问题,所以我不必调用$范围内的功能?谢谢。

+0

一个快速的方法是angular.extend($ scope,MyService) – Whisher

回答

3

添加$scope.MakeGraph = MakeGraph到控制器

controllers.controller('MyController', ['$scope', 'MakeGraph', '$routeParams', function($scope, MakeGraph, $routeParams){ 
    $scope.whichItem = $routeParams.itemId; 
    $scope.MakeGraph = MakeGraph 
}]) 

,那么你可以从您的视图访问MakeGraph

例如:

<a ng-click="MakeGraph.getVotes(12)"> Click me </a> 

请注意,如果你在你的服务回报承诺,你大概会仍然需要在您的控制器中包装,以便正确处理.success/.then/.error ...事件

+0

那么,只有DOM **才能访问控制器内的$ scope变量,即使有东西传入控制器(但没有特别标记$范围)? 谢谢! – user2494584