angularJS 嵌套控制器的model作用范围
发布时间:2020-12-17 09:52:03 所属栏目:安全 来源:网络整理
导读:1.首先一段相互有嵌套控制器的html !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title/headbodydiv ng-app="myApp" div ng-controller="firstController" input type="text" ng-model="name" input type="text" ng-model="age" {{ nam
1.首先一段相互有嵌套控制器的html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <input type="text" ng-model="name"> <input type="text" ng-model="age"> {{ name }} {{ age }} <div ng-controller="secondController"> <input type="text" ng-model="name"> {{ name }} <div ng-controller="thirdController"> <input type="text" ng-model="name"> {{ name }} </div> </div> </div> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="app/index.js"></script> </body> </html> 2.如上,firstController中包含着 senondController,senondController中又包含着thirdController index.js文件中的angular代码如下:
var app=angular.module('myApp',[]); app.controller("firstController",function($scope){ $scope.name="张三丰"; $scope.age=20; }); app.controller("secondController",function ($scope) { }); app.controller('thirdController',function($scope){ }); 我们仅在最外层的 firstController中定义了模型 name 和 age,而页面上我们要在secondController和thirdController中也展示name ,运行结果如下:
发现,secondController和thirdController自身都没有name,于是向自己上层的控制器寻找name变量,故展示了上层控制器的变量值 3.在页面上修改firstController中的model值,则secondController和thirdController的内值同步变化
4.在页面上修改secondController内的文本框内的值,只有thirdController内的值变化,因为此时secondController内新建了自己的name模型,thirdController内向上寻找一层就找到了这个新建的name模型
5.同理,再修改thirdController内文本框的值,则在thirdController中新建了它自己的name模型,此时三者的name就互不影响了
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |