Heim > Artikel > Web-Frontend > 浅谈angularJS 作用域_AngularJS
浅谈angularJS 作用域_AngularJS
- WBOYOriginal
- 2016-05-16 15:51:20979Durchsuche
<!doctype html>
<html ng-app="firstApp">
<head>
<meta charset="utf-8">
<script src="angular-1.3.0.js"></script>
</head>
<body>
<div ng-controller="parentCtrl">
<input ng-model="args">
<div ng-controller="childCtrl">
<input ng-model="args">
</div>
</div>
<script>
var app=angular.module('firstApp',[]);
app.controller('parentCtrl',function($scope) {
$scope.args = '123';
}).controller('childCtrl', function($scope) {
});
</script>
案例说明：
虽然在 childCtrl 中没有定义具体的 args 属性，但是因为 childCtrl 的作用域继承自 parentCtrl 的作用域，
因此，childCtrl通过原型链 到父作用域args 属性并设置到input中。且在父input中输入值自己动同步到子input中
但是反之不行。即子中修改，无法改变父中的值，且导致父修改后子也不同步了，原因：在子作用域input输入内容时，
因为 HTML 代码中 model 明确绑定在 childCtrl 的作用域中，因此 AngularJS 会为 childCtrl 生成一个 args 原始类型属性。
根据 AngularJS 作用域继承原型机制，childCtrl 在自己的作用域找到args属性值，故就不从父中查找args值。
导致最终子作用域有args，父作用域有args，子和父之间的值不会再保持同步。
以上所述就是本文的全部内容了，希望大家能够喜欢。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：iPhone手机上搭建nodejs服务器步骤方法_node.jsNächster Artikel：angularjs客户端实现压缩图片文件并上传实例_AngularJS