web-dev-qa-db-ja.com

angularjsのコントローラーに$ scopeを使用する関数を含める/挿入する方法は？

工場で保持されている関数のライブラリをコントローラーに含めようとしています。このような質問に似ています： 一般的なコントローラー関数の作成

私のメインコントローラーは次のようになります：

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

どんな助けでも本当にありがたいです！

javascriptangularjsdependency-injectionfactorycontrollers
12
LazerSharks

同じスコープにないため、ファクトリは$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;
});
25
Joseph Silber

$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.
4
NicolasMoise

これはこの質問に対する正確な答えではありませんが、ファクトリの関数に引数として$ 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;
});
3
Jazzy