gpt4 book ai didi

angularjs - 同一文件中的多个应用程序和 Controller

转载 作者:行者123 更新时间:2023-12-02 09:13:07 25 4
gpt4 key购买 nike

在此 AngularJS 代码中:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script>
<script>
var app1 = angular.module('app1', []);

app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Jack";
});

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

app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Steve";
});

</script>
<title>Test Controllers</title>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div ng-app="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>

我有两个 ng-app 和两个 Controller 。但似乎只有第一个有效。显示了 jack 的名字,但没有显示史蒂夫的名字。为什么?

最佳答案

显示问题的 JSFiddle 在这里:http://jsfiddle.net/DEnB2/

ng-app 指令的自动初始化仅发生一次,但您可以使用引导方法手动初始化其他模块。 (参见:https://docs.angularjs.org/guide/bootstrap)

带有解决方案的 JSFiddle 在这里:http://jsfiddle.net/DEnB2/5/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.angularjs.org/1.2.9/angular.min.js" type="text/javascript"></script>
<script>
var app1 = angular.module('app1', []);

app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Jack";
});

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

app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Steve";
});

angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
</script>
<title>Test Controllers</title>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div id="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>

关于angularjs - 同一文件中的多个应用程序和 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24867578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com