How can I add custom animation to my custom directive successfully?
.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 have a custom toggled ng-include that calls this in:
<a ng-click="closemenulink(element)" ng-href="#/services"><home class="pantone-ani"></home></a>
Everytime the ng-include includes this into the template, I receive the error message:
TypeError: Object [object HTMLAnchorElement] has no method 'after'
Why does this happen and what is needed here? I'm referring to: http://docs.angularjs.org/api/ngAnimate.$animate
PANTONE 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 am attempting to create animated menus using this setup. However, when I use ng-include to add these pantones (there are 4), the animations become disrupted after being opened and closed once. It seems that after the second load, the "ng-enter" class is not added from the $templateCache, causing issues with my animations.