Question

是否可以在同一元素上应用多个AngularJS控制器？

Answer 1

否，您不能将两个控制器应用于同一元素，但您可以应用多个指令。指令可以有控制器。

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>

正如下面的评论中所提到的，两个控制器可以共享相同的范围，这通常是期望的效果;两个控制器中的一个可以请求新的范围，但是你不能有两个新的范围;

在两个指令中不允许两个隔离范围的原因是，如果范围变量在两个隔离的指令控制器中具有相同的名称，则视图将不知道从哪里获取范围值

这是一篇有趣的读物：Why can't multiple directives ask for an isolated scope on the same element?

Answer 2

您可以扩展控制器并在任何您喜欢的地方使用它。请参阅小提琴以获得更好的示例。

<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

Answer 3

否

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，但它没有将两个控制器分配给ID为div的{{1}}。这称为嵌套控制器。

Answer 4

我刚刚面临同样的问题，试图用容器编写标签代码，我将使用一个指令，该指令使用ng-transclude包装内容 - 这样它就会只有一个内容控制器，然后我会在指令上定义另一个控制器，可以多次重复使用任何必要的内容。

Answer 5

<!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>

Answer 6

这肯定会起作用...

<!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>

是否可以在同一元素上应用多个AngularJS控制器

6 个答案:

否