指令仅被调用一次

Question

我创建了一个自定义指令，进入我的输入字段。该指令的目的是分析输入字段中的值/数据。 This directive is supposed to be called everytime the inputField is given focus/cursor.

但问题是，我的自定义指令只被调用一次。我不确定为什么每次输入字段聚焦时都不会调用它。

我在这里做错了什么？

我是 Angular 的新手，所以我确信我在某处遗漏了一些重要的细节。

这里是plunker。

Answer 1

这是预期的行为，对于任何给定的指令实例，链接函数只会被调用一次。由于您对focus 事件感兴趣，我向应用指令的元素添加了一个事件监听器：

var mainApp = angular.module("myapp", ['ngMaterial']);

mainApp.directive("myDirective", function($log) {
    return {
        restrict : 'A',
        require : "ngModel",
        scope   : {
            myDirective : "="
        },
        link    : function(scope, element, attrs, ngModel) {
          element.on('focus', doSomething);

          function doSomething() {
            $log.log("value is:", scope.myDirective);
            if (ngModel.$isEmpty() && scope.myDirective && scope.myDirective.length > 0) {
               ngModel.$setUntouched();
               ngModel.$setValidity();
            }
        }

      }
    }
});

Plunker

由于您还提到了“光标”，您可能也对mouseover 事件感兴趣。就像添加另一个事件监听器一样简单：

element.on('mouseover', doSomething)

注意：我添加了对scope.myDirective 的额外检查，以避免在读取length 或undefined 时出现控制台错误。

应 OP 的要求：

我不知道 jqLit​​e 是否支持所有这些，但是对于所有 DOM 事件的列表，您应该查看page，您可能对焦点、键盘和鼠标事件最感兴趣。

要查看所有 jqLit​​e 函数的列表，请查看this