Question

我试图创建一个简单的指令，以避免笨重的元素悬停。这就是我所拥有的：

app.directive('ngHover', function(){
  return {
    compile: function($element,attr) {
      $element.attr('ng-mouseenter',attr.ngHover + ' = true')
              .attr('ng-mouseleave',attr.ngHover + ' = false')
              .removeAttr('ng-hover');
    }
  }
})

结果元素是我写的（并且会有效），但它似乎不会在角度使用$compile之前添加。我可以手动使用$compile，但我想了解为什么这不起作用。

DEMO

Answer 1

这就是compiler of Angular的工作方式。

编译器是一个Angular服务，它遍历DOM寻找   属性。编译过程分两个阶段进行。

编译：遍历DOM并收集所有指令。该   结果是一个链接功能。

链接：将指令与范围组合并生成实时视图......

这意味着当你在编译函数中添加属性时，它就结束了，编译器永远不会发现并识别ng-mouseenter和ng-mouseleave作为指令。为了达到这个目的，你需要用$compile触发另一轮编译，如你所说。

另见this message和整个帖子。在那里你可以看到，如果你在当前元素的子元素上设置额外的指令，它会起作用，但不能在它自身上设置。

使用compile函数向元素添加指令

1 个答案: