Is it possible to apply multiple AngularJS controllers on the same element

后端 未结 6 1627
悲哀的现实
悲哀的现实 2021-01-31 08:58

Is it possible to apply multiple AngularJS controllers on the same element ?

相关标签:
6条回答
  • 2021-01-31 09:32

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

    0 讨论(0)
  • 2021-01-31 09:34

    You could extend a controller and use it wherever you like. See the Fiddle for a better example.

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

    <body ng-app="new">
        <div id="container1" ng-controller="aCtrl">
            {{text1}} {{text2}}
        </div>
    </body>
    

    Fiddle: http://jsfiddle.net/kkelly/thk9n20o/#base.com

    0 讨论(0)
  • 2021-01-31 09:37

    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,

    <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 is valid xml/HTML, but it is not assigning two controllers to the div with id c. This is called Nested Controllers.

    0 讨论(0)
  • 2021-01-31 09:42

    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>
    
    0 讨论(0)
  • 2021-01-31 09:44

    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.

    0 讨论(0)
  • 2021-01-31 09:45

    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:

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

    0 讨论(0)
提交回复
热议问题