angular+directive+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，自己改變了就不會反饋給父級，如下圖

初始狀態

更改父值

更改子值

但是今天發覺這個規則對於第二層數據無效。如下圖

初始狀態

更改父值

更改子值

失敗了。

還有下面第二層也是失敗的。

初始狀態


更改父值

更改子值

以下箭頭都指向進行操作的輸入框。

解釋

通過這篇文章：
從 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變量，所以纔會導致父級作用域的值隨輸入同步變化。

如有錯誤，請指正。我也是個新手，還是摸索的過程，希望儘量把每個知識都理解到位。