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

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

Answer 2

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;

}]);

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 个答案: