Reuse function in two different controllers in angularJS
Question
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
app.controller('View1Cntr', ['$scope', function($scope) {
$scope.coloredContent = []; // default
// View1Cntr custom code here
$scope.clearColoredContent = function() {
$scope.coloredContent = [];
}
}]);
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 answers
solution1
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);
}]);
solution2
2 ACCPTED 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.
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
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;
}]);
solution3
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
<!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
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);
});
solution4
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.