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
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就互不影响了
原文地址:https://www.jb51.cc/angularjs/148748.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。