通过使用模块中定义多个控制器不工作 [英] Using multiple controllers defined via module does not work
本文介绍了通过使用模块中定义多个控制器不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在定义控制器为全局的功能,一切工作正常。但是,使用模块来声明和分配控制器时,只有第一个控制器用来解析绑定。我想什么?
<!DOCTYPE HTML>
< HTML和GT;
<头/>
<身体GT;
< DIV NG-应用=摩登原始人>
< DIV NG控制器=flintstoneCtrl>
<标签>名称:LT; /标签>
<输入类型=文本NG模型=YOURNAME占位符=在此处输入名称>
<小时>
< H1>您好{{YOURNAME}}<!/ H1>
< / DIV>
< / DIV>
< DIV NG-应用=隆隆>
< DIV NG控制器=rumbleCtrl>
<标签>名称:LT; /标签>
<输入类型=文本NG模型=YOURNAME占位符=在此处输入名称>
<小时>
< H1>您好{{YOURNAME}}<!/ H1>
< / DIV>
< / DIV>
< /身体GT;&所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js>&下; /脚本>
<脚本> VAR摩登原始人= angular.module(摩登原始人,[]);
flintstones.controller(flintstoneCtrl功能flintstoneCtrl($范围){
$ scope.yourName =弗雷德
}); VAR隆隆= angular.module(隆隆,[]);
rumbles.controller(rumbleCtrl功能rumbleCtrl($范围){
$ scope.yourName =巴尼;
});< / SCRIPT>< / HTML>
解决方案
我想,一个页面只能有一个 NG-应用
作为默认值,你的情况,你有两个 NG-应用
定义。
<一个href=\"http://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page\">If您有多个应用程序在一个页面中,您需要做的手工引导
When defining controllers as global functions, everything works fine. But when using the modules to declare and "assign" the controllers, only the first controller is used to resolve the bindings. What am i missing?
<!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>
解决方案
I think, one page can have only one ng-app
as default, in your case you have two ng-app
definitions.
If you have multiple apps in a page you have to do manual bootstrapping
这篇关于通过使用模块中定义多个控制器不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文