ng-binding不起作用，但ng-model有效

Question

我正在学习使用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

Answer 1

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

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

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

DEMO APP