16

我想我在这里遗漏了一些简单（且重要）的东西。我正在使用一个包含的模板，其中包含一个映射到某个值的输入：

<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/

4

2 回答 2

31

这是绑定到基元而不是对象的常见做法。字符串的值被传递而不是对对象的引用。如果您使用对象而不是原语，它可以正常工作。在你的范围内有这样的东西。

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

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

还：

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

ngRepeat 中的指令时的绑定问题

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

我敢肯定还有更多...

于 2012-12-12T20:59:14.990 回答
7

在父作用域中引用对象属性的另一种方法是使用 $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 中范围原型/原型继承的细微差别是什么？

于 2012-12-12T23:48:49.690 回答