如何使用$ scope在angularjs中包含/注入使用$ scope的函數？

Question

我想將包含在工廠中的函數庫包含到控制器中。 到這樣的問題類似： 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文件中，我創建了工廠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; 
}); 

Answer 2

，因爲它沒有規定你不能在工廠使用$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. 

Answer 3

這不是這個問題的確切答案，但我不得不說我通過傳遞$範圍，因爲解決了類似的問題在我的工廠中對一個函數的爭論。所以它不會是正常的$範圍，而是在調用工廠函數時的$範圍。

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