Question

我有两个模块A和B.模块A中有一个名为moduleAController

的控制器

如何在我的html中调用moduleA中的控制器？

以下是代码段但不起作用。我只想直接在我的html中使用我的控制器。

var moduleA =angular.module("ModuleA");
var moduleB =angular.module("ModuleB",["moduleA"]);
var myapp=angular.module("MyApp",["moduleB"])

<html ng-app="myapp">
    <body ng-controler="moduleAController">

    </body>
</html>

Answer 1

重复：how to reference a controller inside a sub-module in angularjs

另一种解决方案是：

angular.module('myApp', []);
angular.module('myApp.myModule');

  angular.module('myApp.myModule')
       .constant('myModuleConst', {
  partialPath: 'path/to/partials/'
        });


  angular.module('myApp', [
       'myApp.nonsense', 
       'myApp.apparel', 
       'myApp.sounds', 
       'myApp.people']);

这里是参考文件：https://www.safaribooksonline.com/blog/2014/03/27/13-step-guide-angularjs-modularization/

Answer 2

你的代码中有很多拼写错误。 “myapp”和“MyApp”，“moduleB”和“ModuleB”之类的东西不一样，需要保持一致。正确的ModuleA定义应为angular.module("ModuleA", [])。

一旦你解决了这些问题就可以了：

var moduleA = angular.module("ModuleA", []);
moduleA.controller('moduleAController', function($scope) { $scope.name = 'controllerA'})

var moduleB = angular.module("ModuleB", ["ModuleA"]);
var myapp = angular.module("MyApp", ["ModuleB"])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="MyApp">
    <body ng-controller="moduleAController">
    {{ name }}
    </body>
</html>

Answer 3

你有一些拼写错误，骆驼案例问题并且你并没有真正发布所有代码（因为你使用了声明的模块）。

无论如何，这是一个有效的例子：

HTML：

<div ng-app="myapp">
  <div ng-controller="moduleAController as moduleACtrl">
    <span>{{moduleACtrl.test}}</span>
  </div>
  <div ng-controller="moduleBController as moduleBCtrl">
    <span>{{moduleBCtrl.test}}</span>
  </div>
  <div ng-controller="appController as appCtrl">
    <span>{{appCtrl.test}}</span>
  </div>
</div>

JS：

angular.module("moduleA", []).controller('moduleAController', function() {
  this.test = 'Works - Module A';
});

angular.module("moduleB", ["moduleA"]).controller('moduleBController', function() {
  this.test = 'Works - Module B';
});

angular.module("myapp", ["moduleB"]).controller('appController', function(){
  this.test = 'Works - App Controller';
});

JSFIDDLE.

Answer 4

您遇到输入错误，ModuleA的定义中也缺少依赖关系数组。

var moduleA = angular.module("ModuleA",[]);
moduleA.controller('moduleAController',function($scope){
  console.log('moduleAController');
});

var moduleB = angular.module("ModuleB",["ModuleA"]);
var myapp=angular.module("MyApp",["ModuleB"]);

您可以参考plunker https://plnkr.co/edit/sBdu1J?p=preview

请参阅子模块angularjs

4 个答案: