Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 使用另一个模块的子控制器大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经定义了一个模块,并将其作为使用Ng-app指令的应用程序的主要模块.我使用angular.module(‘myApp’).controller()添加了两个控制器到主应用程序.其中一个控制器具有广泛的范围,而另一个控制器是子控制器.

我现在想要做的是包括一个属于另一个模块的控制器(而不是主要的myApp模块),但是我无法理解.我不想要全局命名空间控制器.

有谁知道该怎么做?

这是我到目前为止

<!doctype html>
<html lang="en" data-ng-app='myApp' data-ng-controller='myApp.mainController'>
<head>
  <Meta charset="utf-8">
  <title>Untitled</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function() {
      var app,module;

      //create two modules,one of which will be used for the app base
      app = angular.module('myApp',[]);
      module = angular.module('otherModule',[]);

      //create main controller for main app
      app.controller('myApp.mainController',function($scopE) {
        $scope.content = 'App main controller content';
      });

      //create child controller for main app
      app.controller('myApp.subController',function($scopE) {
        $scope.content = 'App sub controller content';
      });

      //create a controller for the other module
      module.controller('othermodule.controller',function($scopE) {
        $scope.content = 'Other module controller content';
      });
    });


  </script>
</head>
<body>

  <!-- output content from main controller from main module: myApp -->
  {{Content}}

  <!-- specify use of main module's child controller and output its content -->
  <div data-ng-controller='myApp.subController'>
    {{Content}}
  </div>

  <!-- NOT WORKING - ideally should output content from the other module's controller -->
  <div data-ng-controller='othermodule.controller'>
    {{Content}}
  </div>

  <!-- load angular library -->
  <script src="lib/angular/angular.js"></script>
</body>
</html>

代码输出以下JavaScript错误,基本上说没有找到othermodule.controller控制器.

确切错误

> Error: Argument 'othermodule.controller' is not a function,got
> undefined
> assertArg@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:1005
> assertArgFn@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:1016
> @http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:4740
> applyDirectivesToNode/nodeLinkFn/<@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:4322
> forEach@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:140
> nodeLinkFn@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:4307
> compositeLinkFn@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:3953
> compositeLinkFn@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:3956
> nodeLinkFn@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:4338
> compositeLinkFn@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:3953
> publicLinkFn@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:3858
> bootstrap/</<@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:964
> Scope.prototype.$eval@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:7993
> Scope.prototype.$apply@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:8073
> bootstrap/<@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:962
> invoke@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:2843
> bootstrap@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:961
> angularInit@http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:936
> @http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js:14729
> b.CallBACks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> b.CallBACks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> .ready@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> H@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
> 
> http://localhost/sandBox/angular/apptemplate/lib/angular/angular.js
> Line 5687
你目前做的是“声明”两个模块的应用程序和模块.

当角度引导时,您已经要求它通过应用程序引导.所以现在你的应用程序引导应用程序,但应用程序没有引用你的其他模块(这是模块!).

因此,您必须使用应用程序引导应用程序,并指定对模块的依赖关系,或者使用全新模块引导应用程序,并指定对应用程序和模块的依赖.

这就是你如何定义依赖关系

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

如果要创建一个全新的模块并将它们指定为依赖关系

angular.module('myApp',['app','module'])

注意:如果您创建一个全新的模块,则必须使用此新模块引导角度应用程序.

<html ng-app="myApp"...

大佬总结

以上是大佬教程为你收集整理的angularjs – 使用另一个模块的子控制器全部内容,希望文章能够帮你解决angularjs – 使用另一个模块的子控制器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。