ng-binding не работает, но работает ng-model

Я учусь использовать Angular (1.3.10), у меня есть два поля ввода, которые определяют костюм и значение для руки игровой карты. Как вы можете видеть из приведенного ниже изображения, когда я пытаюсь жестко определить костюм и стоимость, карта отображается хорошо (одна справа). Но когда я использую ng-модель для ее привязки, card_value отображается неправильно, хотя он взят браузером. Что я делаю не так?ng-binding не работает, но работает ng-model

<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 инспектор: часть, которая выделяется, где нг-связывающим терпит неудачу, должно быть 5

источник

2016-09-10 Anonymous

'this.pips' назначается один раз в директиве инициализации и никогда изменено позже. Чтобы сделать работу привязки, это может быть 'this.getPip = getPip', а затем' card.pip' в шаблоне можно заменить на 'card.getPip()' (то же самое относится к this.display). Хорошо, что привязка будет работать. Плохо то, что бесконечный дайджест может быть вызван, потому что привязка не может быть рассчитана эффективно. В любом случае, используя ng-repeat для каждого пипса, вы очень скоро убьете производительность. Это нормально, если это демонстрация, но для реального приложения вы можете использовать готовые изображения для просмотра и производительности. – estus

@estus, если я использую предварительно сделанные изображения, тогда я собираюсь в итоге сформулировать 52 заявления. Должен быть лучший способ –

@estus, вы бы не поставили свое решение в код, немного сложно следовать –

ng-bind имеет односторонние привязки данных ,

ng-model предназначен быть положенным внутри элементов формы и имеет двухстороннюю привязку данных Вы должны использовать ng-bind

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

DEMO APP

источник

2016-09-10 03:50:39 Sajeetharan

Зачем использовать это вместо ng-модели? –

@ b11 вы не можете использовать ng-модель для div, вы можете использовать следующее в соответствии с документацией. Директива ngModel связывает вход, select, textarea (или пользовательский контроль формы) с свойством в области видимости с помощью NgModelController, который созданные и выставленные этой директивой. – Sajeetharan

в примере [ng-bind] (https://docs.angularjs.org/api/ng/directive/ngBind), они все равно помещают 'ng-model' на вход и' ng-bind' в элемент span. Как использовать его в моем случае, так как карта - это директива, которую я создал, а не div –

ng-binding не работает, но работает ng-model

ответ

Смежные вопросы