angularjs - Angular - 指令隐藏输入

Question

我有一个自定义指令：

.directive('myDirective', function() {
  return {
      scope: {ngModel:'='},
      link: function(scope, element) {          
           element.bind("keyup", function(event) {
                  scope.ngModel=0;
                  scope.$apply();
            });          
      }
  }
});

这按计划工作，在 keyup 上将变量设置为 0，但它不反映输入本身的变化。同样在初始化时，模型的值不在输入中。这是一个例子：

http://jsfiddle.net/prXm3/

我错过了什么？

Answer 1

您需要放置一个观察者来填充数据，因为该指令创建了一个隔离范围。

angular.module('test', []).directive('myDirective', function () {
    return {
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('ngModel', function (val) {
                element.val(scope.ngModel);
            });

            element.bind("keyup", function (event) {
                scope.ngModel = 0;
                scope.$apply();
                element.val(0); //set the value in the dom as well.
            });
        }
    }
});

或者，您可以将模板更改为

<input type="text" ng-model="$parent.testModel.inputA" my-directive>

数据将被填充，认为它会破坏您执行事件绑定的逻辑。

所以使用观察者更容易。

Working Demo