在angularJS中的两个不同控制器中重用函数
[英]Reuse function in two different controllers in angularJS
问题描述
Suppose I have two different view controllers, whereas both use the same function within their scopes , eg set some scope variable, something like this: 
假设我有两个不同的视图控制器，而它们都在它们的范围内使用相同的功能，例如设置一些范围变量，如下所示：
View1Cntr.js View1Cntr.js
app.controller('View1Cntr', ['$scope', function($scope) {
$scope.coloredContent = []; // default
// View1Cntr custom code here
$scope.clearColoredContent = function() {
$scope.coloredContent = [];
}
}]);
View2Cntr.js View2Cntr.js
app.controller('View2Cntr', ['$scope', function($scope) {
$scope.coloredContent = []; // default
// View2Cntr custom code here
$scope.clearColoredContent = function() {
$scope.coloredContent = [];
}
}]);
Is there any way I could only define the function once and pass it to both controllers, so that the maintenance becomes easier? 有什么办法我只能定义一次功能并将其传递给两个控制器，从而使维护变得更容易？
I guess, this is a closure case (please, correct me if I am wrong) and that is why I am not sure how to get around it. 我想这是一个封闭案例（如果我错了，请纠正我），这就是为什么我不确定如何解决它的原因。
Thanks! 谢谢！
4 个解决方案
解决方案1
2 2016-02-12 19:31:22
First you will have to create a factory: 首先，您必须创建一个工厂：
app.factory('testFactory', function(){
return {
clearColoredContent: function(coloredContent) {
coloredContent = [];
return coloredContent;
}
}
});
And then in the controller include the factory and use it: 然后在控制器中包括工厂并使用它：
app.controller('View1Cntr', ['$scope', 'testFactory' function($scope, testFactory) {
$scope.coloredContent = []; // default
// View1Cntr custom code here
$scope.clearColoredContent = testFactory.clearColoredContent($scope.coloredContent);
}]);
解决方案2
2 已采纳 2016-02-12 19:45:12
you could create factory, with some method, like clearColoredContent inject this factory in both controller, and pass needed scope, to this. 您可以使用某些方法创建工厂，例如clearColoredContent在两个控制器中注入该工厂，然后将所需的范围传递给它。
app.factory('Utility', function(){
return {
clearColoredContent: function(scope){
scope.coloredContent = [];
}
}
})
and use it like this 像这样使用
app.controller('View2Cntr', ['$scope','Utility' , function($scope,Utility) {
$scope.coloredContent = []; // default
// View2Cntr custom code here
$scope.clearColoredContent = function() {
Utility.clearColoredContent($scope);
}
}]);
Or you can use inside Utility function this , and simple assign this utility function to $scope 或者，您可以在Utility函数中使用this ，然后简单地将此Utility函数分配给$ scope
app.factory('Utility', function(){
return {
clearColoredContent: function(){
this.coloredContent = [];
}
}
})
app.controller('View2Cntr', ['$scope','Utility' , function($scope,Utility) {
$scope.coloredContent = []; // default
// View2Cntr custom code here
$scope.clearColoredContent = Utility.clearColoredContent;
}]);
解决方案3
0 2016-02-12 19:04:38
One way you could use the function in both controllers is to define the function in the parent controller so it will be available in both child controllers. 您可以在两个控制器中使用该功能的一种方法是在父控制器中定义该功能，以便该功能在两个子控制器中均可用。 If you have not defined the parent controller, you can define it on html element. 如果尚未定义父控制器，则可以在html元素上对其进行定义。
HTML HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="app.js"></script>
<title>Angular JS Demo</title>
</head>
<body ng-controller="parent">
<div ng-controller="child1"> {{ child1Number }} </div>
<div ng-controller="child2"> {{ child2Number }} </div>
</body>
</html>
JS JS
angular.module('app', []).controller('parent', function($scope) {
$scope.plus = function(input) {
return input + 1;
}
}).controller('child1', function($scope) {
$scope.child1Number = $scope.$parent.plus(1);
}).controller('child2', function($scope) {
$scope.child2Number = $scope.$parent.plus(2);
});
解决方案4
0 2016-02-12 19:05:12
Yes, this can be done by defining the function in a service or factory and then using that in your controller. 是的，这可以通过在服务或工厂中定义功能，然后在控制器中使用它来完成。 Whether you use a service or factory depends on what you're trying to do but some good guidance is here https://stackoverflow.com/a/15666049/5919154 是否使用服务还是工厂取决于您要尝试执行的操作，但是此处提供了一些很好的指导， 网址为https://stackoverflow.com/a/15666049/5919154
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.