javascript - AngularJS 混合来自不同模块的同名 Controller

标签 javascript angularjs

我正在开发一个 AngularJS Web 应用程序,它有很多子模块。其中两个子模块具有 CRUD 功能,因此这两个模块都有一些同名的 Controller 。要了解代码的外观,请查看下面的代码片段:

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script>
    angular
      .module('app', [
        'app.one',
        'app.two'
      ]);

    angular
      .module('app.one', [])
      .controller('MyCtrl', function() {
        var vm = this;
        vm.message = 'Hello World from app.one!';
      });

    angular
      .module('app.two', [])
      .controller('MyCtrl', function() {
        var vm = this;
        vm.message = 'Hello World from app.two!';
      });
  </script>
</head>

<body ng-app="app" ng-controller="MyCtrl as vm">
  <h1>{{ vm.message }}</h1>
</body>

</html>

您还可以在 plnkr 上找到此内容:http://plnkr.co/edit/JRwJsrJd84nPnjj36GAZ .

现在的问题是我很困惑。对我来说,AngularJS 混淆不同模块中同名的 Controller 是没有意义的。如果有人可以解释这个问题并提出解决这个问题的方法,我将非常感激。

提前致谢!

最佳答案

您的 Controller 应该具有唯一的名称。在你的 app.js 中,你需要像下面这样

angular
    .module('app', [
        'app.one',
        'app.two'
      ]);

Angular 将加载 app.oneapp.two 当这两个模块中都有一个名为 MyCtrl 的 Controller 时,它是只是要拿起最新的一张。在本例中, Controller 来自 app.two

您可以通过根据条件有选择地加载所需的模块来克服这个问题,或者只需使用唯一的 Controller 名称即可!

关于javascript - AngularJS 混合来自不同模块的同名 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38435574/

相关文章:

javascript - 如果单词在字典中,则触发 Javascript 中的函数

javascript - JQuery 最近类选择

javascript - 动态更改表单错误的 Angular 工具提示内容

angularjs - 一次绑定(bind): update model and re-render view

angularjs - 将 ng-model 与标签元素一起使用。

javascript - AngularJS:指令找不到注入(inject)的依赖项

javascript - Jquery 按名称选择按钮

javascript - Ui-router加载状态,那我怎么运行一个函数呢?

javascript - 单击一个 li 后,所有 li 都会被单击 - jquery

angularjs - 在 Angular 中断验证中打破多个选项卡之间的表单