AngularJS指令中的双向数据绑定

Question

我一直在尝试定义指令，以便可以根据字段的类型及其参数（存储在数据库中）以表格形式显示不同的“窗口小部件”。我需要对不同类型的场景做出反应，因此需要使用指令来处理布局。

在玩一些示例时，我想出了 kinda 可以工作的代码：

HTML

<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变量绑定要慢），但我认为必须有更好的方法来做到这一点。谁能阐明这件事？

Answer 1

我不知道您为什么$apply手动触发该方法，因为您实际上不需要它。

我编辑了Angular页面中使用的示例，并包含了输入。它对我 有用： 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
      }
    }
  });

UPDATE maxisam是正确的，您必须使用ng-model而不是将变量与值绑定，如下所示：

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

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