Welcome To Ask or Share your Answers For Others

angularjs - angular.js directives in different modules

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

angularjs - angular.js directives in different modules

I am confused. If I can use ng-app only once per page how can I use directives that sit in different modules, in different .js files. Look:

<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(){ ... })

So, how do I now point to the secondModule on the page, without referencing it from mainModule.js

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

Welcome To Ask or Share your Answers For Others

1 Answer

answered Oct 24, 2021 by 深蓝 (71.8m points)

@Agzam, just create a third, top-level, application module that will have dependencies on your sub-modules containing directives:

<script src='mainModule.js'/>
<script src='secondModule.js'/>
<script>
  angular.module('app', ['mainModule', 'secondModule'])
</script>
<body ng-app='app'>
   <my-thingy/>
   <div>
      <other-thingy/>
   </div> 
</body>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...