Изолированный масштаб в директиве Flip Flip Директива

Question

Я реализую директиву для перелистывания карт в AngularJs.

• 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 ulujh 
  

• Директива

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

Проблема: если я использую только один экземпляр директивы т.е. как в выше HTML только верхний директива с кнопками, она отлично работает. Но когда у меня есть несколько экземпляров директивы, как показано выше, один щелчок по указанному выше экземпляру переворачивает все экземпляры.

Этого не должно быть. флип должен быть ограничен/ограничен его собственными возможностями. Я попытался изолировать область действия директивы, добавив область действия: {}, выше функции ссылки, но все равно не влияет.

Пожалуйста, если кто-нибудь может мне помочь, как это сделать правильно.

Edit: Plunker Link - http://plnkr.co/edit/372da6O25hOrBxpT0oX2?p=preview

Помощь Оценил :-)

Answer 1

попробовать с scope: true вместо scope: {}