您的位置:首页 > Web前端 > AngularJS

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
就成了两个完全不一样的东西了

通俗点讲就是:当你兜里没钱的时候,你爸爸兜里的钱就是你的钱,你爸爸有钱你就有钱,你爸爸没钱你就没钱。
但是当你组建了家庭能够自己挣钱的时候,你爸爸就留着他自己的钱养老了,不会再给你了,而你的钱从始至终都属于你自己!
这里只是做个例子,不具备任何意义
  */



                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: