如何在 angularjs 中将使用 $scope 的函数包含/注入到控制器中? [英] How to include/inject functions which use $scope into a controller in angularjs?

问题描述

我正在尝试将工厂中保存的函数库包含到控制器中.类似于这样的问题:创建通用控制器功能

I am trying to include a library of functions, held in a factory, into a controller. Similar to questions like this: Creating common controller functions

我的主控制器如下所示:

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 文件中，我创建了工厂杂货接口.我已经将这个工厂注入到上面的控制器中.

Then, in another .js file, I have created the factory groceryInterface. I've injected this factory into the controller above.

工厂

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在 Object.factory.addToList 等. 显然，我猜这与我在工厂内的函数中使用 $scope 的事实有关.我该如何解决?我注意到在我看过的许多其他示例中，没有人在他们的外部工厂函数中使用 $scope.我试过在我的工厂中将 $scope 作为参数注入，但显然没有用.(例如 recipeApp.factory('groceryInterface', function(){ )

But in my console I keep getting ReferenceError: $scope is not defined at Object.factory.addToList, etc. Obviously I'm guessing this has to do with the fact that I'm using $scope in my functions within the factory. How do I resolve this? I notice that in many other examples I've looked at, nobody ever uses $scope within their external factory functions. I've tried injecting $scope as a parameter in my factory, but that plain out did not work. (e.g. recipeApp.factory('groceryInterface', function(){ )

非常感谢任何帮助！

推荐答案

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

Your factory can't access your $scope, since it's not in the same 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();
    }
});

<小时>

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

---

Alternatively, you can try using a more object oriented approach:

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;
});

这篇关于如何在 angularjs 中将使用 $scope 的函数包含/注入到控制器中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！