微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularjs – angular.js指令在不同的模块

我很困惑.如果我每次只能使用ng-app一次,那么如何使用不同模块中的指令,不同的.js文件.看:
<script src='mainModule.js'/>
<script src='secondModule.js'/>
<body ng-app='mainModule'>
   <my-thingy/>
   <div>
      <other-thingy/>
   </div> 
</body>

mainModule.js:
   angular.module("mainModule",[]).directive("myThingy",function(){ ... })

secondModule.js:
   angular.module("secondModule",[]).directive("otherThingy",function(){ ... })

那么,我现在如何指向页面上的第二个模块,而不是从mainModule.js引用它

一个解决方案可以通过编程方式在页面上引导几个角度模块( docs).

您必须从html中删除ng-app属性.

定义几个模块:

var app1 = angular.module('myApp1',[]);

var app2 = angular.module('myApp2',[]);

app1.controller('MainCtrl',function($scope) {
  $scope.name = 'App1';
});

app2.controller('MainCtrl',function ($scope) {
  $scope.name = 'App2';
})

然后在index.html中做:

<html>
  <head></head>
  <body>
    <!-- Module 1 -->
    <div id="myApp1">
      <div ng-controller="MainCtrl">
        <h1>Hello {{name}}</h1>
      </div>
    </div>
    <!-- Module 2 -->
    <div id="myApp2">
      <div ng-controller="MainCtrl">
        <h1>Hello {{name}}</h1>
      </div>
    </div>
    <!-- Bootstrap modules -->
    <script>
      angular.element(document).ready(function() {
          angular.bootstrap(document.getElementById('myApp1'),['myApp1']);
          angular.bootstrap(document.getElementById('myApp2'),['myApp2']);
     });
    </script>
  </body>
  </html>

这是一个工作plnkr与这个解决方案.

原文地址:https://www.jb51.cc/angularjs/142849.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐