用于将鼠标悬停在元素上的 Angularjs 指令

Question

我正在为用户制作个人资料页面。我想制作一个内联可编辑元素。基本上，当用户将鼠标移到元素上时，会显示一个小铅笔图标。这是我目前所拥有的：

angular.module....yada yada
.directive('editIcon', function () {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {
      var elemIcon = angular.element('<i class="glyphicon glyphicon-pencil"></i>');
      var prevDisplay = elemIcon.css('display', 'none');
      element.append(elemIcon);
      element.on('mouseenter', function() {
        elemIcon.css('display', 'inline');
      });
      element.on('mouseleave', function() {
        elemIcon.css('display', 'none');
      });

    }
  };
});

只需将edit-icon 添加到您的元素中。它有效，但我是一个有角度的新手，新的命名约定完全不同*。是正确的方法吗？我应该使用模板还是编译？

<sub>关于破碎的角度语义学的小小的咆哮 :)
* 为什么要限制：'A' 不是 'Attribute' 或至少是 'Attr' ？节省几个字节？
* 嵌入？真的吗？为什么不注入或类似的东西
* 服务不是真正的服务</sub>

Answer 1

为什么是restrict: 'A'？

这样编译器就不会浪费时间寻找元素，我猜是这个名字的 CSS 类。

是正确的方法吗？

如果可行 :) 如果您（和您的客户）使用现代浏览器，则可以使用 CSS3/HTML5 实现悬停时显示元素。

我应该使用模板还是编译？

同样，既然它有效，就没有必要让事情变得更复杂。