gpt4 book ai didi

angularjs - 使用通过模块定义的多个 Controller 不起作用

转载 作者:行者123 更新时间:2023-12-04 13:14:01 25 4
gpt4 key购买 nike

将 Controller 定义为全局函数时,一切正常。但是当使用模块来声明和“分配” Controller 时,只有第一个 Controller 用于解析绑定(bind)。我错过了什么?

<!doctype html>
<html>
<head/>
<body>
<div ng-app="flintstones">
<div ng-controller="flintstoneCtrl">
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</div>
<div ng-app="rumbles">
<div ng-controller="rumbleCtrl">
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>

var flintstones = angular.module("flintstones", []);
flintstones.controller("flintstoneCtrl", function flintstoneCtrl($scope) {
$scope.yourName = "Fred";
});

var rumbles = angular.module("rumbles", []);
rumbles.controller("rumbleCtrl", function rumbleCtrl($scope) {
$scope.yourName = "Barney";
});

</script>

</html>

最佳答案

@Arun 是正确的。但是,在您的情况下,我猜您并不想两次引导 Angular,而只是使用在不同模块中定义的 Controller 。

这通常是通过拥有一个依赖于所有所需模块的页面/站点模块来完成的,在您的情况下为 flintstonesrumbles .

angular.module('flintstones', []).controller('flintstoneCtrl', ...);
angular.module('rumbles', []).controller('rumbleCtrl', ...);

// Create a module with dependencies.
angular.module('myApp', ['flintstones', 'rumbles'])...

在您的 html 中,您只需使用 ng-app="myApp"并且该模块的内容及其所有依赖项都可以访问。
<html ng-app="myApp">
<body>
<div ng-controller="flintstoneCtrl">...</div>
<div ng-controller="rumbleCtrl">...</div>
</body>
</html>

关于angularjs - 使用通过模块定义的多个 Controller 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16080113/

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