[英]Reuse function in two different controllers in angularJS
假設我有兩個不同的視圖控制器，而它們都在它們的范圍內使用相同的功能，例如設置一些范圍變量，如下所示：
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 = [];
}
}]);
有什么辦法我只能定義一次功能並將其傳遞給兩個控制器，從而使維護變得更容易？
我想這是一個封閉案例（如果我錯了，請糾正我），這就是為什么我不確定如何解決它的原因。
謝謝！
首先，您必須創建一個工廠：
app.factory('testFactory', function(){
return {
clearColoredContent: function(coloredContent) {
coloredContent = [];
return coloredContent;
}
}
});
然后在控制器中包括工廠並使用它：
app.controller('View1Cntr', ['$scope', 'testFactory' function($scope, testFactory) {
$scope.coloredContent = []; // default
// View1Cntr custom code here
$scope.clearColoredContent = testFactory.clearColoredContent($scope.coloredContent);
}]);
您可以使用某些方法創建工廠，例如clearColoredContent在兩個控制器中注入該工廠，然后將所需的范圍傳遞給它。
app.factory('Utility', function(){
return {
clearColoredContent: function(scope){
scope.coloredContent = [];
}
}
})
像這樣使用
app.controller('View2Cntr', ['$scope','Utility' , function($scope,Utility) {
$scope.coloredContent = []; // default
// View2Cntr custom code here
$scope.clearColoredContent = function() {
Utility.clearColoredContent($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;
}]);
您可以在兩個控制器中使用該功能的一種方法是在父控制器中定義該功能，以便該功能在兩個子控制器中均可用。 如果尚未定義父控制器，則可以在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
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);
});
是的，這可以通過在服務或工廠中定義功能，然后在控制器中使用它來完成。 是否使用服務還是工廠取決於您要嘗試執行的操作，但是此處提供了一些很好的指導， 網址為https://stackoverflow.com/a/15666049/5919154
在AngularJS中使用Promises在兩個不同的控制器中進行鏈接
[英]Using Promises in AngularJS for chaining in two different controllers
無法將指令應用於AngularJS中的兩個不同的控制器
[英]Not able to apply a directive to two different controllers in AngularJS
AngularJs：使用ng-repeat和兩個不同的控制器進行搜索
[英]AngularJs: Searching with ng-repeat with two different controllers
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.