Question

我是角度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}}

我无法弄清楚出了什么问题

Answer 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。

Answer 2

完成对上一回复的评论。

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

看起来像这样：

angular.bootstrap（＆＃39; appName＆＃39;，document.getElementById（＆＃39; yourAppBlockId＆＃39;））。

不确定第二个args，但看看角度文档会对你有帮助。

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

2 个答案: