重用功能在兩個不同的控制器中angularJS

假設我有兩個不同的視圖控制器，而都使用他們的範圍內相同功能，例如設置一些作用域變量，像這樣：重用功能在兩個不同的控制器中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 = []; } }]);

有什麼辦法我只能定義一次函數並將它傳遞給兩個控制器，這樣維護變得更容易了？

我想，這是一個封閉的情況下（請糾正我，如果我錯了），這就是爲什麼我不知道怎麼去解決它。

謝謝！你可以在兩個控制器使用功能

來源

2016-02-12 jazzblue

是的，你可以創建'廠'，用一些方法，如'clearColoredContent'注入在這兩個控制器此工廠，並傳遞所需要的範圍，這種 – Grundy

@Grundy：我的功能設置一個自由變量，其是一個$ scope變量。我不知道如何通過服務分享這樣的功能。你能否提供一個例子？謝謝！ – jazzblue

您可以創建工廠，擁有一些方法，比如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); 
    } 

}]);

或者你也可以實用功能this，和簡單的分配中使用此實用程序功能$範圍

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; 

}]);

來源

2016-02-12 19:45:12 Grundy

一種方法是在父控制器來定義功能，因此這將是兩個孩子的控制器可用。如果你還沒有定義父控制器，你可以將其定義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>

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

來源

2016-02-12 19:04:38

請問您能提供一個例子嗎？謝謝！ – jazzblue

是的，這可以通過在服務或工廠定義的函數，然後使用您的控制器來完成。無論您使用服務或工廠取決於你想做什麼，但一些很好的引導是非常https://stackoverflow.com/a/15666049/5919154

來源

2016-02-12 19:05:12

我的函數設置一個自由變量，它是一個$ scope變量。我不知道如何通過服務分享這樣的功能。你能否提供一個例子？謝謝 – jazzblue

首先，你必須創建一個工廠：

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

來源

2016-02-12 19:31:22 Akis

謝謝，這將爲我所描述的情況下工作。我確實簡化了我的情況。通常我需要修改多個$ scope變量。當然，我可以構造一個由多個值組成的對象並使用您的方法。但是，我很好奇，如果我能以更好的方式做到這一點，或者這是否是唯一的方法。無論如何，謝謝你！ – jazzblue

重用功能在兩個不同的控制器中angularJS

回答

相關問題