Javascript 是否可以在同一个元素上应用多个 AngularJS 控制器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28638823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to apply multiple AngularJS controllers on the same element
提问by faressoft
Is it possible to apply multiple AngularJS controllers on the same element ?
是否可以在同一个元素上应用多个 AngularJS 控制器？
回答by Manube
No, you cannot apply two controllers to the same element, but you can apply multiple directives. And directives can have controllers.
不，您不能将两个控制器应用于同一个元素，但您可以应用多个指令。指令可以有控制器。
app.directive('myDirective1', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
app.directive('myDirective2', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
and in the HTML:
并在 HTML 中：
<div myDirective1 myDirective2></div>
And as mentioned in the comments below, the two controllers could share the same scope, which is often the desired effect; one of the two controller can request a new scope, but you cannot have two new scopes;
正如下面的评论中提到的，两个控制器可以共享相同的范围，这通常是预期的效果；两个控制器之一可以请求一个新的作用域，但你不能有两个新的作用域；
the reason for not allowing two isolated scope on the two directives, is that the view would not know where to get the scope values from, if a scope variable had the same name in the two isolated directive controllers
不允许在两个指令上使用两个独立作用域的原因是，如果两个独立指令控制器中的作用域变量具有相同的名称，则视图将不知道从何处获取作用域值
Here is an interesting read: Why can't multiple directives ask for an isolated scope on the same element?
这是一个有趣的读物：为什么多个指令不能要求在同一个元素上有一个隔离的作用域？
回答by KellyCode
You could extend a controller and use it wherever you like. See the Fiddle for a better example.
您可以扩展控制器并随心所欲地使用它。有关更好的示例，请参阅 Fiddle。
<script>
var multiApp = angular.module('new', []);
multiApp.controller('aCtrl', ['$scope', '$controller', function ($scope, $controller) {
$scope.text1 = 'Hello';
angular.extend(this, $controller('bCtrl', {$scope: $scope}));
}]);
multiApp.controller('bCtrl', ['$scope', function ($scope) {
$scope.text2 = 'World!';
}]);
</script>
With html like:
与 html 一样：
<body ng-app="new">
<div id="container1" ng-controller="aCtrl">
{{text1}} {{text2}}
</div>
</body>
回答by David says Reinstate Monica
No
不
HTML is a form of XML, and it is not valid xml to have multiple non-unique attributes on the same element. In other words,
HTML 是 XML 的一种形式，在同一元素上具有多个非唯一属性的 xml 不是有效的 xml。换句话说，
<div ng-controller="a" ng-controller="b">
is invalid. But what about when we do
是无效的。但是当我们这样做的时候呢
<div id="a" ng-controller="a">
<div id="b" ng-controller="b">
<div id="c">
This isvalid xml/HTML, butit is not assigning two controllers to the divwith id c. This is called Nested Controllers.
这是有效的 xml/HTML，但它没有为divwith id分配两个控制器c。这称为嵌套控制器。
回答by Sebastian Sulinski
I've just been faced with the same problem trying to code the tabs with container and I'm going to use a directive, which wraps the content using ng-transclude- this way it will be just one controller for the content and I'll then define another controller on the directive, which can be re-used multiple times with whatever content necessary.
我刚刚在尝试使用容器对选项卡进行编码时遇到了同样的问题，我将使用一个指令来包装内容ng-transclude- 这样它就只是内容的一个控制器，然后我将定义指令上的另一个控制器，它可以与任何必要的内容重复使用多次。
回答by LukCAD
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="LukApp1">
<div ng-controller="LukCon1">
<textarea ng-model="text1" cols="40" rows="10"></textarea>
<textarea ng-model="text2" cols="40" rows="10"></textarea>
</div>
<div ng-controller="LukCon2">
<textarea ng-model="text3" cols="40" rows="10"></textarea>
<textarea ng-model="text4" cols="40" rows="10"></textarea>
</div>
</div>
<script>
var app = angular.module("LukApp1", []);
app.controller("LukCon1", function($scope) {
$scope.text1 = "First Controller TEXT1";
$scope.text2 = "First Controller TEXT2";
});
app.controller("LukCon2", function($scope) {
$scope.text3 = "Second Controller TEXT3";
$scope.text4 = "Second Controller TEXT4";
});
</script>
</body>
</html>回答by 5andeep_negi
this is surely gonna work...
这肯定会奏效...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app="myNgApp">
<div id="div1" ng-controller="anotherController">
Message: {{message}} <br />
<div id="div2" ng-controller="myController">
Message: {{message}}
</div>
</div>
<div id="div3" ng-controller="myController">
Message: {{message}}
</div>
<div id="div4" ng-controller="anotherController">
Message: {{message}}
</div>
<script>
var ngApp = angular.module('myNgApp', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "This is myController";
});
ngApp.controller('anotherController', function ($scope) {
$scope.message = "This is anotherController";
});
</script>
</body>
</html>
