当前位置: 首页 > 面试题库 >

不同模块中的angular.js指令

姬康平
2023-03-14
问题内容

我很困惑。如果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(){ ... })

因此,我现在如何指向页面上的secondModule,而无需从mainModule.js引用它


问题答案:

有一种解决方案,可以以编程方式在页面上引导几个角度模块(docs)。

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

定义几个模块:

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。



 类似资料:
  • 我们已经讲到了如何使用模块名称作为调用的一部分,来调用模块中的函数,如示例 7-7 中所示的 nested_modules 函数调用。 文件名: src/main.rs 示例 7-7:通过完全指定模块中的路径来调用函数 如你所见,指定函数的完全限定名称可能会非常冗长。所幸 Rust 有一个关键字使得这些调用显得更简洁。 Rust 的 use 关键字能将你想要调用的函数所在的模块引入到当前作用域中,

  • 问题内容: 我在模板中有一个需要模板的自定义标签。该属性将由范围填充,然后需要正确的模板。 根据赞美诗的星期和日期,它有多种版本。我期望使用该指令来填充正确的部分。不会读取变量。 有在摘录目录多个文件被标记,… 问题答案: 您可以使用指令。 尝试这样的事情: UPD。 用于观看属性

  • 我正在使用Rcpp和另一个第三方C库开发一个包。当我试图安装包时,我得到了 在32位Windows操作系统中,根据我同事的建议,我通过将以下DLL的位置从MingW添加到系统路径,解决了这个问题。 但64位Windows,我得到相同的错误,即使与dll虽然我使用32位R。 所以我的问题是: 有没有办法知道为什么错误发生?我是说我想知道哪个模块不见了。也许冗长的选项在哪里?

  • 本文向大家介绍Angular.JS中的this指向详解,包括了Angular.JS中的this指向详解的使用技巧和注意事项,需要的朋友参考一下 【this详解】 1、谁最终调用函数,this指向谁。       ① this指向的,永远只可能是对象!!!!!!       ② this指向谁,永远不取决于this写在哪!!而是取决于函数在哪调用。       ③ this指向的对象,我们称之为函数

  • 问题内容: 我有一个带有变量类型的指令myDirective。如果我运行,我希望指令使用templateUrl:x-template.html。如果我愿意,指令可以使用templateUrl:y-template.html。 这是我目前的指令。 我通过stackoverflow和angular文档阅读,但是没有找到我需要的任何东西。 我现在正在尝试按照以下方式进行操作: 但是不知道在哪里做。 你们

  • 问题内容: 我试图使Dagger在@Module批注内没有“ injects”指令的情况下工作。我将测试项目基于Android Simple Dagger示例 这是给我带来问题的部分: (编辑):在我的代码中是CTXModules.java 我要删除的部分是“ injects = HomeActivity.class”。我知道我可以在构造函数中使用@Inject批注标记自己的模块,以在那里删除该部