重用功能在两个不同的控制器中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

回答

相关问题