如何在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等处ReferenceError: $scope is not defined at Object.factory.addToList 。很明显，我猜这与我在工厂内使用$scope的事实有关。 我该如何解决这个问题？ 我注意到，在我看过的许多其他例子中，没有人在外部工厂函数中使用$scope 。 我已经尝试在我的工厂注入$scope作为参数，但是这显然不起作用。 （例如recipeApp.factory('groceryInterface', function(){ ）
任何帮助真正感激！
你的工厂不能访问你的$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;
});
因为没有定义，所以你不能在工厂使用$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.
这不是这个问题的确切答案，但我有一个类似的问题，我通过简单地将$ 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;
});
上一篇: How to include/inject functions which use $scope into a controller in angularjs?