使用角度js的单个文件中的多个控制器答案

【问题标题】：Multiple controllers in single file using angular js使用角度js的单个文件中的多个控制器
【发布时间】：2014-09-28 01:03:18
【问题描述】：

我是 Angular JS 的新手。我正在开发控制器。我创建了以下脚本。

<!DOCTYPE html>
<html>
<head>
    <title>just learnin!</title>
</head>
<body>
    <div data-ng-app="clock" data-ng-controller="zerocontroller">
        <h2>Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}</h2>
    </div>
    <div class="first" data-ng-app="justin" data-ng-controller="mycontrol">
        <h1>Name is {{k}}</h1>
    </div>
<script type="text/javascript" src="angular.min.js"></script>
<script>
    var just=angular.module('justin',[]);
    just.controller('mycontrol',function($scope){
        $scope.k="Harvey";
    });

    var clock=angular.module('clock',[]);
    clock.controller('zerocontroller',function($scope){
        $scope.time=new Date();
        $scope.timeview={hour:0,min:0,sec:0};
        var update=function(){
        $scope.time=new Date();
        $scope.timeview.hour=$scope.time.getHours();
        $scope.timeview.min=$scope.time.getMinutes();
        $scope.timeview.sec=$scope.time.getSeconds();
        };
        setInterval(function(){$scope.$apply(update)},1000);
    });
</script>
</body>
</html>

问题是在 DOM 中遇到的第一个控制器只能工作，即当前的o/p是：

Readable time is 15:55:36

Name is {{k}}

但是当我交换这个

  <div data-ng-app="clock" data-ng-controller="zerocontroller">
        <h2>Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}</h2>
   </div>

有了这个

<div class="first" data-ng-app="justin" data-ng-controller="mycontrol">
        <h1>Name is {{k}}</h1>
        </div>

o/p 变成

Name is Harvey

Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}

我不知道出了什么问题

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您只能在 html 文件中定义一个 ng-app。不支持重复的 ng-app 声明。您可以通过将 ng-app 放在 body 或 html 标签上来实现您正在做的事情，例如： <body ng-app="app"> 删除所有其他 ng-app 声明。

现在一切都可以驻留在一个模块app 中。或者您可以创建多个模块并将它们添加为对根模块app 的依赖，例如：

var just=angular.module('justin',[]);

var clock=angular.module('clock',[]);

var main=angular.module('app', ['justin','clock']);

更新：正如@nico 所指出的，如果我们想在 html 上支持多个 ng-app，我们需要使用 angular.bootstrap API 手动引导它们。例如，请参阅此SO post。

【讨论】：

我认为你错了。 angular 示例页面中使用了多个应用程序，如果您使用手动引导程序，这不是问题，否则页面上只有一个应用程序可以工作。
是的，我没有考虑手动引导过程，这并不常见。我会更新我的答案。
@Chandermani 你能推荐一些书或网站来有效地学习这个吗？
官方文档egghead.io 和thinkster.io/angulartutorial/a-better-way-to-learn-angularjs 将为您提供先机。我也在写关于“AngularJS by Example”的书，但这还有几个月的时间:)。

【解决方案2】：

完成我对上一个回复的评论。

您不能使用自动引导在单个页面中使用多个 ng-app。但。从您的标记中删除您的 ng-app（或 data-ng-app），然后手动启动 Angular 应用程序。

看起来像这样：

angular.bootstrap('appName', document.getElementById('yourAppBlockId')).

不确定第二个参数，但查看 angular 文档会对您有所帮助。

【讨论】：