CODEWITHSUNDEEP
javascriptangularjs
vimes1984
vimes1984

Reputation: 1693

ng-animate and custom diretives?

I am trying to add custom animation to my custom directive but failing why? 

      .directive('home', function ($animate) {
  return {
      templateUrl: 'views/pantone-inner-home.html',
      restrict: 'AE',
      link: function postLink($scope, element, $parent) {
          var parentElement = element[0].parentElement;
          var afterElement = element[0].parentElement;
          $animate.enter(element, parentElement, afterElement);
                $scope.PrevNext = 'open';
                $scope.mainmenulink = '';
                $('.top_left_logo.white  img').css('position', 'fixed');
                $('#focus_force').focus();
      }
    };
});

I then have a custom toggled ng-cluded that calls this in: 

        <a ng-click="closemenulink(element)"  ng-href="#/services"><home class="pantone-ani"></home></a>

is just give me this everytime the ng-include includes this into the template: 

TypeError: Object [object HTMLAnchorElement] has no method 'after'

why? what does it need here: I'm using this: http://docs.angularjs.org/api/ngAnimate.$animate

PATNONE INNER HOME: 

  <div ng-click="pantone()" class="pantone_wrap_outer blue slide_bottom">
    <div  class="pantone_wrap_inner blue">
      <div class="pantone blue">
        <img src="images/services.png" alt="">
      </div>
    </div>
  </div>

I'm trying to animate a menu with this and if i use ng-include to add these pantones ( there are 4) then after it's been opened and closed once it stays in the $templateCache so it doesn't add the "ng-enter" class after the second load which ruins my animations..

Upvotes: 0

Views: 106

Answers (1)

madhured
madhured

Reputation: 443

Please see the following plunker

http://plnkr.co/edit/v8aCQI59reemfiEwXICC?p=preview

I think the afterElement is null to you as there are no siblings with the element.

Please check the plunker and let me know if you need anything else.

Upvotes: 2

Related Questions