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即可。它有效，但我是一个有角度的新手，新的命名惯例完全不同*。是正确的方法吗？我应该使用模板还是编译？

_{关于破碎的角度信息的小咆哮:)

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

*翻译？真？为什么不注射或类似的东西

*服务不是真正的服务}

Answer 1

为什么restrict: 'A'？

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

是正确的做法吗？

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

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

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

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

1 个答案: