CODEWITHSUNDEEP
javascripthtmlangularjstwitter-bootstrapangularjs-directive
Lukasz Madon
Lukasz Madon

Reputation: 14994

Angularjs directive for mouse over an elment

I'm making a profile page for a user. I want to make an inline editable element. Basically when a user move mouse over and element a little pencil icon is shown. Here is what I have so far:

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

    }
  };
});

an just add edit-icon to your element. It works, but I'm an angular newbe and a new naming conventions are completely different*. Is the right approach? Should I use template or compile?

tiny rant about broken angular sematics :)
* why restrict: 'A' not 'Attribute' or at least 'Attr' ? save a few bytes?
* transclusion? really? why not inject or something similar
* services are not really services

Upvotes: 1

Views: 1165

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

why restrict: 'A'?

So that the compiler will not waste time looking for elements, CSS classes with this name I guess.

Is the right approach?

If it works :) Showing an element on hover can be accomplished with CSS3/HTML5, if you (and your clients) are on modern browsers.

Should I use template or compile?

Again, since it works, there is no need do make things more complex.

Upvotes: 1

Related Questions