Question

我有一些在不同控制器中使用的功能，而不是将它多次复制并粘贴到控制器中，我想把它拉出来并放在工厂里。

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

相反，我已经在每个控制器内部创建了功能＆＃39; $ scope调用工厂的函数，以便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);
};

我能解决这个问题，所以我不必在$ scope内调用该函数吗？感谢。

Answer 1

将$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>

请注意，如果您在服务中返回promises，您可能仍需要在控制器中进行换行以正确处理.success / .then / .error ...事件

使用工厂的依赖注入函数（AngularJS）

1 个答案: