AngularJS:模板中的第二个应用程序不起作用

时间:2015-04-25 09:01:27

标签: javascript html angularjs web

我有两个相同的应用程序(除app /控制器名称之外)。第一个按预期工作,第二个显然根本没有执行。

我的代码(jsfiddle):

<div ng-app="passwdtool" ng-controller="PasswordController">
Password: <input ng-model="pass" required type="text"><br>
<span>{{ hash }}</span><br>
</div>

<div ng-app="passwdtool2" ng-controller="PasswordController2">
Password: <input ng-model="pass" required type="text"><br>
<span>{{ hash }}</span><br>
</div>
angular.module('passwdtool', [])
.controller('PasswordController', ['$scope', function($scope) {
  $scope.pass = "password";
  $scope.hash = "a hash";
}]);

angular.module('passwdtool2', [])
.controller('PasswordController2', ['$scope', function($scope) {
  $scope.pass = "password";
  $scope.hash = "a hash";
}]);

输出:

  

密码:[password]
  哈希
  密码:[]
  {{hash}}

发生了什么事?

1 个答案:

答案 0 :(得分:2)

AngularJS尝试找到第一个ng-app并启动它。 如果您要在html中定义其他ng-app,则必须明确启动它们。

该功能是:

angular.bootstrap(<elements on which the ng-app will be attached>, <ng-app name>);

在你的情况下它应该是:

var domElement = document.getElementById('app2'); //attach app2 id to the element.
angular.bootstrap(domElement, ["passwdtool2"]);

此功能用于您在同一页面上需要多个ng-app的情况。 看到这个小提琴,我修改了你的: https://jsfiddle.net/7bew5q0r/2/

另外,你甚至不需要第二个ng-app,因为angular无论如何都会忽略它。 所以更新: https://jsfiddle.net/7bew5q0r/3/