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

}]);

有没有办法只定义一次函数并将其传递给两个控制器，以便维护变得更容易

我想，这是一个了结案件（请纠正我，如果我错了），这就是为什么我不知道如何摆脱它

---

谢谢

在两个控制器中使用该函数的一种方法是在父控制器中定义该函数，使其在两个子控制器中都可用。如果尚未定义父控制器，则可以在

html

元素上定义它

HTML

---

是的，这可以通过在服务或工厂中定义功能，然后在控制器中使用该功能来实现。您使用的是服务还是工厂取决于您正在尝试做什么，但这里有一些很好的指导

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

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

}]);

或者您可以使用内部实用程序函数

this

，并简单地将此实用程序函数分配给$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;

}]);

---

是的，您可以创建

工厂

，使用一些方法，比如

clearColoredContent

将此工厂注入两个控制器中，并将所需的范围传递给this@Grundy：My函数设置一个自由变量，它是$scope变量。我不知道如何通过服务共享这样的功能。你能举个例子吗？谢谢我的函数设置一个自由变量，它是$scope变量。我不知道如何通过服务共享这样的功能。你能举个例子吗？谢谢，请举个例子好吗？谢谢谢谢，这对我所描述的案例是有效的。我确实简化了我的案子。通常我需要修改多个$scope变量。当然，我可以构造一个由多个值组成的对象并使用您的方法。然而，我很好奇我是否可以用更好的方式来做，或者这是唯一的方式。无论如何，谢谢你，给你一分！工厂中的“this.coloredContent”真的能够访问控制器中的scope变量吗？当i console.log'this'变量时，它显示工厂内容，而不是控制器。。。我遗漏了什么吗？@ZeroDefect，似乎我遗漏了这一行：

$scope.clearColoredContent=Utility.clearColoredContent
app.controller('View2Cntr', ['$scope','Utility' , function($scope,Utility) {

    $scope.coloredContent = [];  // default

    // View2Cntr custom code here

    $scope.clearColoredContent = function() {
        Utility.clearColoredContent($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;

}]);