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 に答える