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