AngularJS ng-model 不做双向数据绑定

Question

我有一个带有这样输入框的标签：

<label class="item item-input">
    <input type="text" data-ng-model="description"
           placeholder="Add a Description!">
</label>

如你所见，这个输入框被绑定到范围“描述”

在我的控制器中，我有一些类似的东西：

$scope.description = "";
$scope.submit = function() {
    console.log($scope.description);
};

在我的 HTML 中，我也有这一行：

<div ng-show="description.length <= maxChars">{{description}}</div>

当用户在输入框内输入后点击提交按钮时，提交函数被调用。说明正确显示。当用户在输入框中输入内容时，描述会在 HTML 中更新，但不会在控制器中更新。

我感觉这与将描述设置为空字符串有关，但就 HTML 而言，它显然正在更新。但无论如何它都会保留 console.logging 和空字符串。

为了让它工作，我必须将描述直接传递到提交函数中（并相应地更新函数）：

<button class="button button-positive" data-ng-click="submit(description)">Submit</button>

这是完全没有必要的，因为 Angular 应该自动进行双向数据绑定，但事实并非如此。

有人有什么想法吗？

任何帮助将不胜感激。

编辑：

由于受欢迎的需求，这里是完整的 HTML。

<ion-view title="Moments" id="page2">
<ion-content padding="true" class="has-header">
<img src="{{picture}}" height="300px" width="100%"> </img>
<div class="row">
  <div ng-show="description.length > maxChars" style= "color: red">{{description}}</div>
  <div ng-show="description.length <= maxChars">{{description}}</div>
</div>
<div class="row" ng-if="description">
  <div ng-show="description.length > maxChars" style= "color: red">{{description.length}} / {{maxChars}}</div>
  <div ng-show="description.length <= maxChars" style= "color: green">{{description.length}} / {{maxChars}}</div>
</div>
<div class="row">
    <div class="col">
      <label class="item item-input">
        <input type="text" data-ng-model="description" placeholder="Add a Description!">
      </label>
    </div>
    <button style="margin-right: 5px" class="col col-10 button button-positive" data-ng-click="checkDescription(description)">OK</button>
</div>
<div class="row">
  <div class="col"><ion-checkbox data-ng-change="changeLocation()" data-ng-model="location">Show Location</ion-checkbox></div>
</div>
<div class="row">
  <div class="button-bar">
    <button class="button button-assertive" data-ng-click="cancel()">Cancel</button>
    <button class="button button-positive" data-ng-click="submit(description)">Submit</button>
  </div>
</div>
</ion-content>
</ion-view>

我也知道在这个问题中，提交函数不带参数。这就是我想要的样子。目前我的提交按钮采用一个参数（描述）。这不应该是必要的。我对函数“checkDescription”也有同样的问题。该函数也应该没有参数，但我不得不将描述直接传递给函数。我不想做的事情。

Answer 1

执行摘要：

在 AngularJS 中，子作用域通常从其父作用域原型继承。这条规则的一个例外是使用scope: { ... } 的指令——这会创建一个在原型上不继承的“隔离”范围。（以及带有嵌入的指令）这种结构通常在创建“可重用组件”指令时使用。在指令中，默认情况下直接使用父范围，这意味着您在指令中更改的来自父范围的任何内容也将在父范围中更改。如果您设置scope:true（而不是范围：{ ... }），那么原型继承将用于该指令。

范围继承通常很简单，您甚至不需要知道它正在发生...直到您尝试双向数据绑定（即，表单元素，ng-model） 从子范围内到在父范围上定义的原语（例如，数字、字符串、布尔值）。它不像大多数人期望的那样工作。发生的情况是子作用域获得了自己的属性，该属性隐藏/隐藏了同名的父属性。这不是 AngularJS 正在做的事情——这就是 JavaScript 原型继承的工作方式。新的 AngularJS 开发人员通常没有意识到 ng-repeat、ng-switch、ng-view、ng-include 和 ng-if 都创建了新的子作用域，因此当涉及这些指令时，问题通常会出现。 （有关问题的快速说明，请参阅this example。）

遵循always have a dot '.' in your ng-models 的“最佳实践”可以轻松避免原语的这个问题 - 观看 3 分钟。 Misko 演示了 ng-switch 的原始绑定问题。

--AngularJS Wiki -- The Nuances of Scope Prototypal Inheritance

---

我试着做'.'符号在我的范围内，但每当我尝试像这样引用它时：

$scope.moment.description = ""; 

它说“无法读取undefined 的属性'描述'。

代码需要在给属性赋值之前创建对象：

$scope.moment = {};
$scope.moment.description = "";

//OR

$scope.moment = { description: "" };