angularjs某些指令在外部作用域继承并创建新的子作用域引申出的“值复制”与“引用复制”的问题
2016-10-12 15:50
495 查看
<!DOCTYPEhtml> <htmllang="zh-CN"ng-app="app"> <head> <metacharset="utf-8"> <title>在指令中使用子作用域</title> <linkrel="stylesheet"href="../bootstrap.min.css"> </head> <body> <h4>JavaScript对象要么是值复制要么是引用复制。字符串、数字和布尔型变量是值复制。数组、对象和函数则是引用复制。下面来看看这两个的区别</h4> 1.值复制 <divng-controller="SomeController"> 初始值:<inputtype="text"ng-model="someBareValue"><br> {{someBareValue}} <buttonng-click="someAction()">父作用域</button> <divng-controller="ChildController"> {{someBareValue}} <buttonng-click="childAction()">子作用域</button> </div> </div> 1.引用复制 <divng-controller="SController"> {{someModel.someValue}} <buttonng-click="someAction()">父作用域</button> <divng-controller="CController"> {{someModel.someValue}} <buttonng-click="childAction()">子作用域</button> </div> </div> <scriptsrc="../angular.min.js"></script> <script> angular.module('app',[]) //值复制 .controller('SomeController',function($scope){ $scope.someBareValue='';//不赞成这样声明数据应该以数据模型的方式声明一个对象参见引用复制 $scope.someAction=function(){ $scope.someBareValue='hellohuman,fromparent'; }; }) .controller('ChildController',function($scope){ $scope.childAction=function(){ $scope.someBareValue='hellohuman,fromchild'; }; }) //引用复制 .controller('SController',function($scope){ $scope.someModel={ someValue:'hellocomputer' }; $scope.someAction=function(){ $scope.someModel.someValue='hellohuman,fromparent'; }; }) .controller('CController',function($scope){ $scope.childAction=function(){ $scope.someModel.someValue='hellohuman,fromchild'; }; }); </script> </body> </html>
某些指令指的是:
ng-include ng-switch ng-repeat ng-view ng-controller ng-if
避免指令从外部作用域继承并创建一个新的子作用域的方式使用ng-include为例:
<divng-include="/test.html"ng-controller="ctrl">
hello{{name}}
</div>
这里的ng-controller非常重要等同于你手动指定了某个特定的作用域
这样ng-include指令就不会像往常一样从外部作用域继承并创建一个新的子作用域
这段代码在这里只是做个例子,不具备任何意义
这里我着重说下值复制,引用复制没啥可说的
/* 关于值复制: ChildController属于SomeController的子作用域那么理所应当在子作用域中的$scope.someBareValue没有初始值的时候, 他会复制父作用域中$scope.someBareValue的值作为自己的值,当父作用域中的$scope.someBareValue的值改变时也会造成子作用域 中的$scope.someBareValue的值改变,但是当子作用域中的$scope.someBareValue有初始值的时候,父作用域和子作用域中的$scope.someBareValue 就成了两个完全不一样的东西了 通俗点讲就是:当你兜里没钱的时候,你爸爸兜里的钱就是你的钱,你爸爸有钱你就有钱,你爸爸没钱你就没钱。 但是当你组建了家庭能够自己挣钱的时候,你爸爸就留着他自己的钱养老了,不会再给你了,而你的钱从始至终都属于你自己! 这里只是做个例子,不具备任何意义 */
相关文章推荐
- 引用外部控件的问题,无法创建控件
- 创建自定义 AngularJS 指令:Part 3 孤立作用域与函数参数
- angularjs 组内自定义require指令在时间输入框中引用时出现的问题及排查
- 创建自定义 AngularJS 指令:Part 2 孤立作用域
- 创建自己的AngularJS - 作用域继承(一)
- angular的指令的子作用域继承问题
- 创建自己的AngularJS - 作用域继承(二)
- angularJS学习之路(七)---子控制器关于是引用机制还是复制机制的问题---原型继承
- AngularJS 指令scope作用域问题,$apply
- 母版页引用外部文件的路径问题
- 母版页引用外部文件的路径问题,如加载javascript文件时
- 有关extern关键字/引用外部文件的变量问题
- cuda 自己创建工程,复制sdk中的代码,执行遇到的问题
- 解决继承窗体或用户控件时“visual继承当前被禁用,因为基类引用设备特定的组件或包含 p/invoke”问题(转)
- 引用外部.css或.js文件的路径问题
- 母版页中引用图片、外部js、css文件的路径问题
- JSP页面无法引用外部css,图片的问题
- 解决继承窗体或用户控件时“visual继承当前被禁用,因为基类引用设备特定的组件或包含 p/invoke”问题【转】
- 引用第三方库lib/dll出现的无法解析的外部符号问题
- asp.net web service引用外部DLL中枚举的问题