Javascript AngularJS混合来自不同模块的同名控制器_Javascript_Angularjs

Javascript AngularJS混合来自不同模块的同名控制器

javascript angularjs

Javascript AngularJS混合来自不同模块的同名控制器,javascript,angularjs,Javascript,Angularjs,我正在开发一个AngularJS web应用程序，它有很多子模块。其中两个子模块具有CRUD功能，因此这两个模块都有几个同名控制器。要了解代码的外观，请查看下面的代码段： <!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.

我正在开发一个AngularJS web应用程序，它有很多子模块。其中两个子模块具有CRUD功能，因此这两个模块都有几个同名控制器。要了解代码的外观，请查看下面的代码段：

<!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>


有棱角的
.module（'app'[
“应用程序一”，
“应用程序二”
]);
有棱角的
.module（'app.one'，[]）
.controller（'MyCtrl'，function（）{
var vm=这个；
vm.message='app.one的Hello World！'；
});
有棱角的
.module（'应用程序二'，[]））
.controller（'MyCtrl'，function（）{
var vm=这个；
vm.message='helloworld from app.two！'；
});
{{vm.message}}

您也可以在plnkr找到此文件：

现在，问题是我很困惑。对我来说，AngularJS混淆相同名称但在不同模块中的控制器是没有意义的。如果有人能解释这一点，并提出克服这一问题的方法，我将非常感激

提前谢谢

您的控制器应该有唯一的名称。在你的app.js中，你喜欢下面的内容吗

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

Angular将同时加载

app.one

和

app.two

当这两个模块中都有一个名为

MyCtrl

的控制器时，它只会选择最近的一个。在这种情况下，来自

app.two

的控制器

您可以通过根据条件选择性地加载所需的模块来克服这一问题，否则只需使用唯一的控制器名称即可

在这一部分，我发现，我不能理解的是，假设我试图从模块中加载控制器（假设使用ui.router）。。。它仍然会在最后加载的模块中获取控制器。这种封装的目的不就没有了吗？还是我看错了？@haseebahmed7-看看这个问题：-在指令上设置隔离作用域为我解决了问题。如果深入挖掘-模块的所有

要求

逐个加载，将每个

$provide

值合并到

$injector

或父模块中。Angular.js:

函数模块（名称、要求、配置fn）{…}

，

函数加载模块（模块加载）{…}

。从notes中，

$injector

绑定到元素，因此如果您有

应用程序

，并且提供的所有

$injector

都绑定到

应用程序

元素，则在

$injected

应用程序二时，您只需重写

MyCtrl

$inject

和

$provide

使用名称作为键，这就是为什么要重写它。