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/

此外：

Using `ng-model` within a transcluded directive in AngularJS

binding issue when a directive in a ngRepeat

AngularJS - updating scope value with asynchronous response

我确信还有更多...

Answer 2

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

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

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

$ parent.testvalue将模型绑定到父作用域中的属性
testvalue本身将模型绑定到将在子范围上创建的新属性。这个属性＆＃34;阴影/隐藏＆＃34;父范围属性的名称相同。
foo.testvalue（例如，参见@ dnc253＆＃39;答案）也将模型绑定到父属性。它的工作原理如下：Javascript没有看到/找到foo＆＃39;在子范围内，所以它在父范围内查找（由于原型继承）并在那里找到它。

要查看子范围的外观，请使用原始小提琴，并将此代码添加到模板中的某个位置：

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

并将此代码添加到Ctrl：

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

在您输入文本框之前，请点击＆＃34;显示范围＆＃34;链接。在控制台（我使用Chrome）中，您可以扩展＆＃34; Child＆＃34;范围并看到它还没有包含testvalue属性（我觉得很惊讶，因为我不知道它是如何在文本框中显示＆＃34;初始值＆＃34;）。您可以展开$ parent，然后在那里看到testvalue属性 - 具有此名称的属性此时似乎只在父作用域中。

现在，清除控制台，在文本框中输入，然后单击＆＃34;显示范围＆＃34;再次链接。你会看到＆＃34;孩子＆＃34; scope现在有一个新的testvalue属性。它会隐藏/隐藏父属性。因此，子作用域中的内容会看到子作用域testvalue属性，而父作用域中的内容会看到父作用域testvalue属性。

更新：仅供参考，我最近撰写了一篇关于范围原型继承的广泛答案/文章，更详细地解释了上述概念，并提供了大量图片：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

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

2 个答案: