Question

为什么我不能从ng-include里面的html设置控制器ExampleCtrl的$ scope.myProperty的值。但是如果我定义$ scope.myObj.myProperty并且在html中我引用ng-model="myObj.myProp"工作正常吗？

示例：

<div ng-app="MyApp">
    <div ng-controller='ExampleCtrl'>
        <div ng-include="'#inlcude'"></div>
        <!-- THIS DON'T WORK -->
        <p><b>myProperty:</b>{{myProperty}}</p>
        <!-- THIS WORK -->
        <p><b>myObj.myProperty:</b>{{myObj.myProperty}}</p>
    </div>
</div>    
<!-- INCLUDE HTML -->
<div id='include'>
    <input ng-model='myProperty' type='text' />
    <input ng-model='myObj.myProperty' type='text' />
</div>

我理解为包含创建一个新的范围，但为什么从包含的html中我看不到父范围的简单原因？

由于

Answer 1

当输入写入myProperty时，它将（在那时）在子范围上创建一个属性。此子作用域属性隐藏/隐藏同名的父属性。子进程的任何更改都将在子范围属性上进行。父作用域无法看到这个新的子作用域属性 - 它不知道该其他属性是否存在。在插入{{myProperty}}时，它会找到自己的属性。

当另一个输入写入myObj.myProperty时，它跟随原型链并写入父范围的属性。

有关更详细的答案（包含大量图片），请参阅What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

AngularJS：ng-include和范围

1 个答案: