In my AngularJs project, I am working on a directive to achieve card flipping functionality.
Using HTML(Jade)
card display | this is sid input.btn.btn-primary(type='submit', value='Save',ng-click="flip()") editor | this is test input.btn.btn-primary(type='submit', value='Save',ng-click="flip()") card display hey siddharth editor huu ulujhDirective Code
'card': function () { return { restrict: 'EA', link: function($scope, $elem, $attrs) { var options = { flipDuration: ($attrs.flipDuration) ? $attrs.flipDuration : 400, timingFunction: 'ease-in-out' }; angular.forEach(['display', 'editor'], function(name) { var el = $elem.find(name); if (el.length == 1) { angular.forEach(['', '-ms-', '-webkit-'], function(prefix) { angular.element(el[0]).css(prefix + 'transition', 'all ' + options.flipDuration/1000 + 's ' + options.timingFunction); }); } }); $scope.flip = function() { $elem.toggleClass('flipped'); } } }; }
The issue I'm facing is that when I use multiple instances of the directive as shown above, clicking on one instance flips all the instances simultaneously. This behavior is not desired and I have tried isolating the scope by adding scope: {}, but it didn't work.
I need guidance on how to properly limit the flip action to its own scope. Any help or suggestions would be greatly appreciated!
Your assistance is highly valued :-)