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

Angular - Directive隐藏输入

1 个答案: