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

标签 javascript html angularjs web

<分区>

我有两个相同的应用程序(除了应用程序/ Controller 名称)紧接着彼此。第一个按预期工作,第二个显然根本没有执行。

我的代码(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: [password]
a hash
Password: []
{{ hash }}

这是怎么回事?

最佳答案

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-apps,则可以使用此函数。 看到这个 fiddle ,我已经修改了你的: https://jsfiddle.net/7bew5q0r/2/

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

关于javascript - AngularJS:模板中的第二个应用程序不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29863154/

相关文章:

javascript - 有人可以在这里向我解释一下 'each' 方法吗?

javascript - ng-click 在移动屏幕上不起作用

javascript - AngularJS ngRoute 404页面未找到

javascript - 将 promise 的结果插入数组

javascript - "JavaScript sanitization doesn' t save you from innerHTML”是什么意思?

javascript - Tablesorter 总是在内容编辑后重新加载第一页

javascript - 通过回调将脚本注入(inject)到页面

html - 如何在 cakePhP 站点中拥有纯 HTML(来自 index.html)目录?

jquery - 为什么此 HTML 会导致页面变为空白

html - 使用 li 代替选择选项