Question

绑定model to an input与绑定model with a non-input元素（例如div）时，AngularJS数据绑定有何区别？

Answer 1

非输入类型元素旨在使用ng-bind，它提供单向绑定，但输入类型使用ng-model提供双向绑定。

如果你想在非输入但可编辑（html5）元素上进行双向绑定，你必须自己实现这些元素以支持ng-model。

将ng-model支持添加到非输入元素的示例是：

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

最后，让我们不要忘记第三个选项角度提供，即“一次性”或一次性绑定。如果你不需要binded元素在它从作用域的第一个初始值后继续更新，它只会发生一次：

<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

Angular有一个特殊的指令，它允许输入元素ng-model的双向数据绑定，然后它也有两种方式，但在实践中它表现为绑定ng-bind或速记{{expresion}}的单向方式，然后，当您确定只想显示以后不会被任何其他过程更新的初始数据时，使用{{::expresion}}进行适当的一次性绑定。因此，如果您想使用输入改变模型，请转到ng-model。

AngularJS数据绑定输入与非输入元素

2 个答案: