12

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

我的主控制器如下所示：

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(){）

任何帮助都非常感谢！

4

3 回答 3

25

您的工厂无法访问您的$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;
});
于 2013-10-28T18:20:24.337 回答
4

您不能$scope在工厂中使用，因为它没有定义。相反，在您的工厂函数中更改工厂返回的对象的属性，例如

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

然后这些将传递给您的$scope变量

$scope.addToList = groceryInterface.addToList;
// ... = groceryInterface.addToList(); would assign to `$scope.addToList` what is returned, instead of the function itself.
于 2013-10-28T18:23:42.463 回答
3

这不是这个问题的确切答案，但我有一个类似的问题，我通过简单地将 $scope 作为参数传递给我工厂中的函数来解决。所以它不会是正常的 $scope，而是调用工厂中的函数时的 $scope。

app.controller('AppController', function($scope, AppService) {


  $scope.getList = function(){

    $scope.url = '/someurl'

    // call to service to make rest api call to get data

    AppService.getList($scope).then(function(res) {
      // do some stuff 

    });
  }

});


app.factory('AppService', function($http, $q){
  var AppService = {

    getList: function($scope){
      return $http.get($scope.url).then(function(res){
        return res;
      });
    },

  }

  return AppService;
});
于 2014-04-15T16:45:47.973 回答