Вход для привязки данных AngularJS к элементам без ввода

Question

В чем разница в привязке данных AngularJS при связывании model to an input против привязки элемента model with a non-input (например, div)?

Answer 1

Элементы типа non-type предназначены для использования ng-bind, который обеспечивает одностороннюю привязку, но типы ввода используют ng-модель для обеспечения двухстороннего связывания.

Если вы хотите, чтобы 2-х сторонняя привязка к элементу без ввода, но редактируемого (html5), вам придется реализовать это для таких элементов для поддержки ng-модели.

пример добавления поддержки нг-модели для отсутствия входного элемента:

app.directive("contenteditable", function() { 
    return { 
    restrict: "A", 
    require: "ngModel", 
    link: function(scope, element, attrs, ngModel) { 

     function read() { 
     ngModel.$setViewValue(element.html()); 
     } 

     ngModel.$render = function() { 
     element.html(ngModel.$viewValue || ""); 
     }; 

     element.bind("blur keyup change", function() { 
     scope.$apply(read); 
     }); 
    } 
    }; 
}); 

Источник: http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/editing-text-in-place-using-html5-content-editable.html

И, наконец, давайте не будем забывать третий вариант углового предложения, которая является «Один раз» или один с привязкой. что случается только один раз, если вам не нужно привязываться элемент постоянно обновлять после его первого начальное значение из сферы:

<p>Hello {{::name}}!</p> 

<custom-directive two-way-attribute="::oneWayExpression"></custom-directive> 

Источник: http://blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html

Answer 2

Угловая имеет специальную директиву, которая позволяет двустороннюю привязку данных для входные элементы ng-model, то он имеет также два пути, но на практике он ведет себя как один из способов привязки ng-bind или стенографический код {{expresion}}, а затем он имеет правильную привязку времени, используя {{::expresion}}, когда вы уверены, что хотите отображать только исходные данные, которые не будут обновляется другими способами позже. Поэтому, если вы хотите изменить вашу модель с помощью входных данных, перейдите на ng-model.