如何在angularjs中包含/注入使用$ scope的函数到控制器？

Question

我试图将一个工厂中的函数库包含在一个控制器中.类似于这样的问题: 创建通用控制器功能

我的主控制器看起来像这样:

recipeApp.controller('recipeController', function ($scope, groceryInterface, ...){

$scope.groceryList = [];
// ...etc...    

/* trying to retrieve the functions here */
$scope.groceryFunc = groceryInterface; // would call ng-click="groceryFunc.addToList()" in main view
    /* Also tried this:
    $scope.addToList = groceryInterface.addToList();
    $scope.clearList = groceryInterface.clearList();
    $scope.add = groceryInterface.add();
    $scope.addUp = groceryInterface.addUp(); */
}

然后,在另一个.js文件中,我创建了工厂的groceryInterface.我把这个工厂注入上面的控制器.

厂

recipeApp.factory('groceryInterface', function(){

        var factory = {};

    factory.addToList = function(recipe){
        $scope.groceryList.push(recipe);
                    ... etc....
    }

    factory.clearList = function() {
            var last = $scope.prevIngredients.pop();
            .... etc...
    }

    factory.add = function() {
    $scope.ingredientsList[0].amount = $scope.ingredientsList[0].amount + 5;
    }

    factory.addUp = function(){
        etc...
    }

    return factory;
});

但是在我的控制台中我一直在ReferenceError: $scope is not defined at Object.factory.addToList等等.显然我猜这与$scope我在工厂内的功能中使用的事实有关.我该如何解决这个问题？我注意到在我看过的许多其他例子中,没有人$scope在他们的外部工厂功能中使用过.我已经尝试$scope在我的工厂注入一个参数,但是这个没有用.(例如recipeApp.factory('groceryInterface', function(){)

任何帮助真的很感激!

Answer 1

您的工厂无法访问您的工厂$scope,因为它不在同一范围内.

试试这个:

recipeApp.controller('recipeController', function ($scope, groceryInterface) {

    $scope.addToList = groceryInterface.addToList;
    $scope.clearList = groceryInterface.clearList;
    $scope.add       = groceryInterface.add;
    $scope.addUp     = groceryInterface.addUp;
}

recipeApp.factory('groceryInterface', function () {

    var factory = {};

    factory.addToList = function (recipe) {
        this.groceryList.push(recipe);
    }

    factory.clearList = function() {
        var last = this.prevIngredients.pop();
    }
});

或者,您可以尝试使用更面向对象的方法:

recipeApp.controller('recipeController', function ($scope, groceryInterface) {

    $scope.groceryFunc = new groceryInterface($scope);
}

recipeApp.factory('groceryInterface', function () {

    function Factory ($scope) {

        this.$scope = $scope;
    }

    Factory.prototype.addToList = function (recipe) {
        this.$scope.groceryList.push(recipe);
    }

    Factory.prototype.clearList = function() {
        var last = this.$scope.prevIngredients.pop();
    }

    return Factory;
});