angularJS 加载多个ng-app

作者: newway_001 | 来源:发表于2018-11-21 11:23 被阅读0次

<html>
    
    <head>
        <scriptsrc="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">
       </script> 
        <script>
        
        // 创建moudle1
        var rootMoudle = angular.module('moudle1', []);
        rootMoudle.controller("controller1",function($scope){$scope.name="atddddy"});
        
        // 创建moudle2
        var m2 = angular.module('moudle2', []);
        m2.controller("controller2",function($scope){$scope.name="aty"});
        
        
        // 页面加载完成后,再加载模块
        angular.element(document).ready(function() {
            //angular.bootstrap(document.getElementById("div1"),["moudle1"]);
           //这个模块可以不用写angular.bootstrap，自动加载，
            angular.bootstrap(document.getElementById("div2"),["moudle2"]);//手动加载
        });
        
    </script>
    
    </head>
    <body>
        <div id="div1" ng-app='moudle1' ng-controller="controller1">
                                  div1:{{name}}
</div>
        <div id="div2" ng-app='moudle2' ng-controller="controller2">
                                  div2:{{name}}
</div>
    </body>
    
</html>