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变量，所以才会导致父级作用域的值随输入同步变化。

如有错误，请指正。我也是个新手，还是摸索的过程，希望尽量把每个知识都理解到位。