Man*_*ube 34
不,您不能将两个控制器应用于同一元素,但您可以应用多个指令.指令可以有控制器.
app.directive('myDirective1', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
app.directive('myDirective2', function() {
return {
controller: function(scope) {
//directive controller
}
};
});
在HTML中:
<div myDirective1 myDirective2></div>
正如下面的评论中所提到的,两个控制器可以共享相同的范围,这通常是期望的效果; 两个控制器中的一个可以请求一个新的范围,但是你不能有两个新的范围;
不允许在两个指令上使用两个隔离范围的原因是,如果范围变量在两个隔离的指令控制器中具有相同的名称,则视图将不知道从哪里获取范围值
这是一个有趣的读物:为什么多个指令不能在同一个元素上要求隔离范围？
Kel*_*ode 31
您可以扩展控制器并在任何您喜欢的地方使用它.请参阅小提琴以获得更好的示例.
<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>
用html像:
<body ng-app="new">
<div id="container1" ng-controller="aCtrl">
{{text1}} {{text2}}
</div>
</body>
小提琴:http://jsfiddle.net/kkelly/thk9n20o/#base.com
HTML是XML的一种形式,在同一元素上具有多个非唯一属性是无效的xml.换一种说法,
<div ng-controller="a" ng-controller="b">
是无效的.但是当我们这样做的时候呢
<div id="a" ng-controller="a">
<div id="b" ng-controller="b">
<div id="c">
这是有效的xml/HTML,但它不会将两个控制器分配给divwith id c.这称为嵌套控制器.