javascript - 指令仅被调用一次

Question

我创建了一个位于输入字段内的自定义指令。该指令的目的是分析输入字段内的值/数据。 每次给 inputField 提供焦点/光标时都应该调用该指令。

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

我在这里做错了什么？

我是 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 的额外检查，以避免在读取 undefined 的 length 时出现控制台错误。

应OP的要求:

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

有关所有 jqLit​​e 函数的列表，请检查 this