ng-binding 不工作，但 ng-model 工作答案

【问题标题】：ng-binding is not working but ng-model worksng-binding 不工作，但 ng-model 工作
【发布时间】：2017-01-18 05:27:51
【问题描述】：

我正在学习使用 Angular (1.3.10)，我有两个输入字段来指定一手扑克牌的花色和价值。如下图所示，当我尝试对花色和价值进行硬编码时，这张牌显示得很好（右侧一张）。但是当我使用 ng-model 绑定它时，card_value 没有正确显示，尽管它被浏览器拾取。我究竟做错了什么？

<div ng-app = "cards">
    <form>
        <div>
            <input ng-model = "card_value">
            <span>of</span>
            <input ng-model = "card_suit">
        </div>
    </form>

    <div>
        <p>Entered: {{card_value}} of {{card_suit}}</p>

        <!-- card.value is not binding up perfectly fine -->
        <card value = "{{card_value}}" suit = "{{card_suit}}"></card>
        <!--  -->

        <!-- this shows up perfectly fine -->
        <card value = "5" suit = "Clubs" ></card> 
        <!--  -->
    </div>
</div>

我看到的显示内容：

Chrome 检查器：突出显示的部分是 ng-binding 失败的地方，应该是 5

【问题讨论】：

this.pips 在指令 init 上分配一次，以后不再修改。为了使绑定工作，它可能是this.getPip = getPip，然后模板中的card.pip 可以替换为card.getPip()（同样适用于this.display）。好消息是绑定会起作用。不好的是，由于无法有效计算绑定，可能会导致无限摘要。无论如何，对每个 pip 使用 ng-repeat 会很快杀死性能。如果这是一个演示也没关系，但对于真正的应用程序，您可能希望使用预制图像来提高外观和性能。
@estus 如果我使用预制图像，那么我将得到 52 个 if 语句。必须有更好的方法
@estus 您介意将您的解决方案放入代码中吗，这有点难以理解
抱歉，暂时没有足够的时间来提供高质量的答案。图像可以有合适的文件名，允许通过表达式替换它们，这是阻力最小的路径，图像提供最佳性能和外观。当然，它可以通过多种方式完成，例如输入值可以用 $scope.$watchCollection 来观察，并且卡片的内部 DOM 仅在使用纯 jQuery 的值更改时更新（这是它的优点），没有 pip 绑定。关键是 ng-repeat 使用不当会严重影响性能，优化 Angular 性能对于初学者来说是一项艰巨的任务。
我建议将问题分成更小的问题，并用更小的代码块一次解决一个问题，这样有更高的机会得到一个好的答案（不要忘记链接到更大的问题来给出一个完整的观点）。

标签： javascript html angularjs angular-ngmodel ng-bind

【解决方案1】：

ng-bind 具有单向数据绑定。

ng-model 旨在放置在表单元素内，并具有双向数据绑定你应该使用ng-bind

  <div ng-bind-html="card_value"></div>

DEMO APP

【讨论】：

为什么用这个代替 ng-model？
@b11 您不能在 div 上使用 ng-model ，您可以根据文档在以下内容上使用 ngModel 指令将输入、选择、文本区域（或自定义表单控件）绑定到使用 NgModelController 的范围，由该指令创建和公开。
在示例ng-bind 中，他们仍然在输入中放置ng-model，在span 元素中放置ng-bind。我将如何使用它，因为 card 是我创建的指令而不是 div
因为我做不到<card ng-bind="card_value" ng-bind="card_suit"></card>
不适合我，这些值没有与输入框绑定