javascript - 用于将鼠标悬停在元素上的 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 添加到您的元素即可。它有效，但我是一个 Angular 新手，新的命名约定完全不同*。正确的做法是吗？我应该使用模板还是编译？

<sub>关于 splinter 的 Angular 语义的小提示:)
* 为什么限制:'A'而不是'Attribute'或至少是'Attr'？节省几个字节？
* 嵌入？真的吗？为什么不注入(inject)或类似的东西
* 服务并不是真正的服务</sub>

Answer 1

why restrict: 'A'?

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

Is the right approach?

如果它有效:)如果您(和您的客户)使用现代浏览器，则可以使用 CSS3/HTML5 来完成在悬停时显示元素。

Should I use template or compile?

再说一次，既然它有效，就没有必要让事情变得更复杂。