問題
一個簡單的scope:true的指令作用域中的值綁定的情況。
scope:true表明了,修改自己的值將不能影響到父級的值。然鵝,今天使用了對象類型的屬性進行綁定,結果就失敗了。
下面這是一個正確的例子
html
<div ng-controller="Ctrl">
父輸入框第二層:<input type="text" ng-model="menu['菜單1']['mesWebsite']" />
<div ng-bind="menu['菜單1']['mesWebsite']"></div>
<br />
<div website-input></div>
父輸入框:<input type="text" ng-model="mesWebsite" />
<div ng-bind="mesWebsite"></div>
</div>
js部分
<script>
angular.module('docsSimpleDirective', [])
.controller('Ctrl', function($scope) {
$scope.menu = {
'菜單1':{"name":"菜單1","mestype":2},
'菜單2':{"name":"菜單2","mestype":1}
};
$scope.nowItem = {
name: '菜單1',
mestype: 2
};
$scope.mesWebsite = '1234';
})
.directive('myDr', ['$compile', myDrFunc]);
function myDrFunc($scope){
var dom = '子輸入框第二層:<input ng-model="menu[\'菜單1\'][\'mesWebsite\']"/><div ng-bind="menu[\'菜單1\'][\'mesWebsite\']"></div><br>' +
'子輸入框:<input ng-model="mesWebsite"/><div ng-bind="mesWebsite"></div>';
return {
scope:true,
restrict:'AE',
template:function(){
console.log('模板生成');
return dom;
}
}
}
</script>
原本scope:true,自己改變了就不會反饋給父級,如下圖
初始狀態
更改父值
更改子值
上面這個例子一切正常。然後,當使用複雜的json數據進行綁定時,實際上指令作用域並沒有生成自己的私有變量。因爲引用數據類型還是訪問的父級的變量。
如下圖
初始狀態
更改父值,一起變
更改子值,還是一起變了???
於是失敗了。
還有下面第二層數據也是失敗的。
初始狀態
更改父值
更改子值,看着一起變呢?
以上箭頭都指向進行操作的輸入框。
解釋
通過這篇文章:
從 JavaScript 繼承說起, 深入理解 Angular Scope 繼承關係
我發現,在給子輸入框輸入的時候相當於給它賦值,賦值的過程就是創建一個自己的變量。
$scope.aa = 'aa';
$scope.bb = 'bb';
$scope.nowItem = {};
和下面常規類型賦值一個道理
let aa = 'aa';
let bb = 'bb';
let nowItem = {};
根據作用域鏈,自己的作用域有了變量,就不會再訪問原型鏈上的父作用域。
然而當對象不存在的時候是不能直接給屬性賦值的
let nowItem.aa = 'zcxcxcx'; //nowItem不存在,錯誤
而下面
$scope.nowItem.aa = 'czxcxzv'; //同理失敗
這卻是個訪問的過程。要給nowItem的aa屬性賦值,但是自己連nowItem變量都沒有,也是因爲作用域鏈,就先向上訪問原型鏈上的父級作用域上的nowItem變量,所以纔會導致父級作用域的值隨輸入同步變化。
如有錯誤,請指正。我也是個新手,還是摸索的過程,希望儘量把每個知識都理解到位。