Angularjs:2路绑定在包含的模板中不起作用

Question

我想我在这里缺少一些简单(和重要)的东西.我正在使用一个包含模板的模板,该模板包含一个映射到某个值的输入:

<div ng-controller="Ctrl">
    <div ng-include src="'template.html'"></div>
</div>

<!-- template -->
<script type="text/ng-template" id="template.html">
    <input ng-model="testvalue" />
</script>

控制器:

function Ctrl($scope) {    
   $scope.testvalue= "initial value";
}?

警告$ scope.testvalue的值始终显示初始值,而不是更新的值(当您键入输入时).帮助我欧比万.你是我们唯一的希望.

小提琴:http://jsfiddle.net/h5aac/

Answer 1

这是绑定到基元而不是对象的常见问题.传递字符串的值而不是对象的引用.如果您使用对象而不是基元,它可以正常工作.你的范围内有类似的东西.

$scope.foo = {testvalue: "initial value"};

见http://jsfiddle.net/h5aac/2/

也:

在AngularJS中的transcluded指令中使用`ng-model`

ngRepeat中的指令时绑定问题

AngularJS - 使用异步响应更新范围值

我相信还有更多......

Answer 2

在父作用域中引用对象属性的替代方法是使用$ parent访问父作用域中的基元:

<input ng-model="$parent.testvalue" />

ng-include创建子范围.该范围原型继承自Ctrl的父范围.以下是3种变体的工作原理:

• $ parent.testvalue将模型绑定到父作用域中的属性
• testvalue本身将模型绑定到将在子范围上创建的新属性.此属性使用相同的名称"隐藏/隐藏"父作用域属性.
• foo.testvalue(例如,参见@ dnc253的答案)也将模型绑定到父属性.它的工作方式如下:Javascript在子范围内没有看到/找到'foo',所以它在父范围中寻找它(由于原型继承)并在那里找到它.

要查看子范围的外观,请使用原始小提琴,并将此代码添加到模板中:

<a ng-click="showScope($event)">show scope</a>

并将此代码添加到Ctrl:

$scope.showScope = function(e) {
   console.log(angular.element(e.srcElement).scope());
}

在键入文本框之前,请单击"显示范围"链接.在控制台(我正在使用Chrome)中,您可以扩展"子"范围并看到它不包含testvalue属性(我觉得很惊讶,因为我不知道它是如何显示"初始值"的在文本框中).您可以展开$ parent,然后您将看到testvalue属性 - 此时,具有此名称的属性似乎仅在父作用域中.

现在,清除控制台,键入文本框,然后再次单击"显示范围"链接.您将看到"Child"范围现在具有新的testvalue属性.它会隐藏/隐藏父属性.因此,子作用域中的内容会看到子作用域testvalue属性,而父作用域中的内容会看到父作用域testvalue属性.

更新:仅供参考,我最近撰写了一篇关于范围原型继承的广泛答案/文章,更详细地解释了上述概念,并附有大量图片:AngularJS中范围原型/原型继承的细微差别是什么？