在angularJS中的两个不同控制器中重用函数

Question

假设我有两个不同的视图控制器，而它们都在它们的范围内使用相同的功能，例如设置一些范围变量，如下所示：

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 = [];
    }

}]);

有什么办法我只能定义一次功能并将其传递给两个控制器，从而使维护变得更容易？

我想这是一个封闭案例（如果我错了，请纠正我），这就是为什么我不确定如何解决它的原因。

谢谢！

Answer 1

首先，您必须创建一个工厂：

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

Answer 2

您可以使用某些方法创建工厂，例如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;

}]);

Answer 3

您可以在两个控制器中使用该功能的一种方法是在父控制器中定义该功能，以便该功能在两个子控制器中均可用。 如果尚未定义父控制器，则可以在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);
});

Answer 4

是的，这可以通过在服务或工厂中定义功能，然后在控制器中使用它来完成。 是否使用服务还是工厂取决于您要尝试执行的操作，但是此处提供了一些很好的指导，网址为https://stackoverflow.com/a/15666049/5919154

在angularJS中的两个不同控制器中重用函数

问题描述

4 个解决方案

解决方案1
2 2016-02-12 19:31:22

解决方案2
2 已采纳 2016-02-12 19:45:12

解决方案3
0 2016-02-12 19:04:38

解决方案4
0 2016-02-12 19:05:12

在angularJS中的两个不同控制器中重用函数

问题描述

4 个解决方案

解决方案1 2 2016-02-12 19:31:22

解决方案2 2 已采纳 2016-02-12 19:45:12

解决方案3 0 2016-02-12 19:04:38

解决方案4 0 2016-02-12 19:05:12

解决方案1
2 2016-02-12 19:31:22

解决方案2
2 已采纳 2016-02-12 19:45:12

解决方案3
0 2016-02-12 19:04:38

解决方案4
0 2016-02-12 19:05:12