对angularJs中controller控制器scope父子集作用域的实例讲解
更新时间：2018年10月08日 10:24:52 作者：泠泠在路上
今天小编就为大家分享一篇对angularJs中controller控制器scope父子集作用域的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1.ctrl1是父级控制器，ctrl2和ctrl3都是ctrl1的子级控制器，
2.父级ctrl1中name值的改变会影响ctrl2和ctrl3中name值的改变，
3.但是ctrl2有自己的name输入传的值，不会影响ctrl1和ctrl3，这就是继承隔离，
4.ctrl3无name赋值就继承父级ctrl1中的name的值。
一、继承隔离的情况
<div ng-app="module">
<div ng-controller="ctrl1">
{{name}}<input type="text" ng-model="name">
<div ng-controller="ctrl2">
{{name}}<input type="text" ng-model="name">
</div>
<div ng-controller="ctrl3">
{{name}}
</div>
</div>
</div>
<script>
var m = angular.module('module', []);
m.controller('ctrl1', ['$scope', function ($scope) {
$scope.name = '泠泠在路上'
}]);
m.controller('ctrl2', ['$scope', function ($scope) {
}]);
m.controller('ctrl3', ['$scope', function ($scope) {
}]);
</script>
运行结果：
二、继承但不隔离
在ctrl2中改变name的值，既影响自己的值，也影响父级的值。
代码：
<div ng-app="module">
<div ng-controller="ctrl1">
{{data.name}}<input type="text" ng-model="data.name">
<div ng-controller="ctrl2">
{{data.name}}<input type="text" ng-model="data.name">
</div>
<div ng-controller="ctrl3">
{{data.name}}
</div>
</div>
</div>
<script>
var m = angular.module('module', []);
m.controller('ctrl1', ['$scope', function ($scope) {
/* 定义对象*/
$scope.data={name:'泠泠在路上'}
}]);
m.controller('ctrl2', ['$scope', function ($scope) {
}]);
m.controller('ctrl3', ['$scope', function ($scope) {
}]);
</script>
运行结果：
以上这篇对angularJs中controller控制器scope父子集作用域的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇使用angular帮你实现拖拽的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Angular.js去除页面中显示的空行方法，文中给出了详细的示例代码供大家参考学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
AngularJs是Google开源的前端JS框架。使用AngularJs, 我们能够容易地、健壮的开发出类似于Gmail一样的单页Web应用。这篇文章主要介绍了详解angular中如何监控dom渲染完毕，有兴趣的可以了解一下。2017-01-01
angular+ionic 的app上拉加载更新数据实现方法
这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法，需要的的朋友参考下2017-01-01
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Angular模版驱动表单的使用总结，本文实现了Angular支持表单的双向数据绑定，校验，状态管理，非常具有实用价值，需要的朋友可以参考下2018-05-05
Angular.Js中过滤器filter与自定义过滤器filter实例详解
Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，所以下面这篇文章主要给大家介绍了Angular.Js中过滤器filter与自定义过滤器filter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
Angular2中Bootstrap界面库ng-bootstrap详解
不知道大家有没有留意，最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ， 因此对这个ng-bootstrap 也是很感兴趣，所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。2016-10-10
这篇文章主要介绍了Angular刷新当前页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了angularjs中ng-bind-html的用法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论