AngularJS 指令中的两种数据绑定方式

问题描述

我一直在尝试定义指令，以便可以在表单中显示不同的小部件"，具体取决于存储在数据库中的字段类型及其参数.我需要对不同类型的场景做出反应，因此需要指令来处理布局.

I have been trying to define directives so I can display different "widgets" in a form, depending on the type of field and its parameters, which are stored in a database. I need to react to different types of scenarios, hence the need for directives to handle layout.

在玩一些示例时，我想出了一个 *kinda* 工作的代码:

While playing with a few examples, I came up with a code that *kinda* works:

<input type="text" ng-model="myModel" style="width: 90%"/>  
<div class="zippy" zippy-title="myModel"></div>

指令

myApp.directive('zippy', function(){
    return {
      restrict: 'C',
      // This HTML will replace the zippy directive.
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {
            // Title element
            element.bind('blur keyup change', function() {
                scope.$apply(read);
            });

            var input = element.children();


            function read() {
                scope.title = input.val();
            }
        }
    }
});

这似乎可行(尽管明显比 *proper* angularJS 变量绑定慢)，但我认为必须有更好的方法来做到这一点.谁能解释一下这个问题?

This seems to works (albeit noticeably slower than a *proper* angularJS variable binding) but I figure there must be a better way to do this. Can anyone shed some light on the matter?

推荐答案

我不知道你为什么要手动触发 $apply 方法，因为你实际上并不需要它.

I don't know why you are triggering the $apply method manually because you actually don't need it.

我编辑了您在 Angular 页面中使用的示例并包含了输入.它对我有用:http://jsfiddle.net/6HcGS/2/

I edited the example you used from the Angular page and included the input. It works for me: http://jsfiddle.net/6HcGS/2/

HTML

<div ng-app="zippyModule">
  <div ng-controller="Ctrl3">
    Title: <input ng-model="title">
    <hr>
    <div class="zippy" zippy-title="title"></div>
  </div>
</div>​

JS

function Ctrl3($scope) {
  $scope.title = 'Lorem Ipsum';
}

angular.module('zippyModule', [])
  .directive('zippy', function(){
    return {
      restrict: 'C',
      replace: true,
      transclude: true,
      scope: { title:'=zippyTitle' },
      template: '<input type="text" value="{{title}}"style="width: 90%"/>',
      link: function(scope, element, attrs) {
        // Your controller
      }
    }
  });

更新maxisam 是对的，您必须使用 ng-model 而不是像这样将变量与值绑定:

UPDATE maxisam is right, you have to use ng-model instead of binding the variable against the value like so:

<input type="text" ng-model="title" style="width: 90%"/>

这是工作版本:http://jsfiddle.net/6HcGS/3/

这篇关于AngularJS 指令中的两种数据绑定方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！