Javascript Angularjs指令，用于将鼠标移到elment上

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

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');
      });

    }
  };
});

angular.module….yada-yada
.指令（'editIcon'，函数（）{
返回{
限制：“A”，
链接：函数（$scope，element，attrs）{
变量elemIcon=角度元素（“”）；
var prevDisplay=elemIcon.css（'display'，'none'）；
元素追加（elemIcon）；
on（'mouseenter'，function（）{
css（'display'，'inline'）；
});
on（'mouseleave'，function（）{
css（'display'，'none'）；
});
}
};
});

只需将

编辑图标添加到元素中即可。这是可行的，但我是一个有棱角的新手，新的命名规则完全不同*。这是正确的方法吗？我应该使用模板还是编译

关于破碎的角度语义的微小咆哮：）

*为什么要限制：'不是'属性'或至少是'属性'？保存几个字节

*转换？真正地为什么不注射或类似的东西

*服务不是真正的服务

为什么
限制：“A”

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

这是正确的方法吗

如果有效：）如果您（和您的客户机）使用现代浏览器，则可以使用CSS3/HTML5在悬停状态下显示元素

我应该使用模板还是编译

同样，既然它能工作，就没有必要让事情变得更复杂。
为什么要限制“A”我的意思是为什么一个字符代表值。我的应用程序需要一段时间才能加载，尤其是在手机上。有点担心性能。