Yönerge

Question

Yönergesinde olay yayılımı ile kendiliğinden geçiş yapmaktan kaçının Tıklama açıp kapatması gereken bir araç ipucu yönergesi ve ayrıca isteğe bağlı tıklamayı kapat. angular-translate, öğenin içeriğini değiştirmeye izin vermediğinden, bunun yerine yönergenin öğelerini ekleyin.

yönergesi (bu basitleştirilmiş bir sürümüdür lütfen unutmayın) biraz şuna benzer:

{ 
    restrict: 'A', 
    scope: {}, 
    compile: function(element) 
    { 
     element.after('<div class="toggle"></div> 
      <div class="message" ng-show="active"></div>'); 
    }, 
    link: function(scope, element) 
    { 
     angular.element(element.siblings('toggle')).click(function() 
     { 
      scope.$apply(function() 
      { 
       scope.active = !scope.active; 
      } 
     }); 
     angular.element(document).click(function() 
     { 
      scope.$apply(function() 
      { 
       scope.active = false; 
      } 
     }); 
    } 
} 

Sorun şu ki elemana tıklama etkinlik (scope.active = true) tetiklenir ve sonra yayılır olmasıdır Belge anında kapatılır.

Ancak yayılımı durdurursam, çoğu durumda iyi çalışır, sayfamdaki yönergenin birden fazla örneğine sahip olduğum zamanki bir durum olmaz (birincisi açılır ve ilk açılacak ve diğeri açılmalıdır fakat yayılma olmanın diğer örneğinin document.click olayı başlatılmıyor durdu

Düzenleme:.This fiddle sorunu gösterir yeşil kutuyu tıklayın ve işe yarıyor tekrar tıklarsanız, eğer. Yeşil kutuyu tıklatırsanız ve arka planı çalışırsa, yeşil kutuyu tıklatırsanız ve diğer yeşil kutu ise her ikisi de açık olur, ancak ilk önce kapatılmalıdır.
event.stopPropagation()'unumaralı telefondan kaldırırsanız, kutudaki tıklatma ilk olarak tetiklendiğinden, ipucu gösterilir, ancak daha fazla olay yayılmasından sonra arka plan tıklaması da tetiklenir ve anında tekrar kapatılır. Sorunum için daha iyi bir genel çözüm varsa

---

sevinirim yanı

Answer 1

Bu size yardımcı olacaktır çözümlerden biridir.

Canlı örnek üzerinde jsfiddle.

angular.module('app', []) 
 
    .controller('testCtrl', ['$scope', 
 
    function($scope) { 
 
     var self = this; 
 
    } 
 
    ]) 
 
    .directive('hintDirective', ['$compile', 
 
    function($compile) { 
 
     var directiveHint = []; 
 
     return { 
 
     restrict: 'A', 
 
     transclude: true, 
 
     scope: {}, 
 
     template: '<ng-transclude></ng-transclude><span ng-click="toggle($event)" class="toggle"></span><div class="message" ng-show="active">Hint Message</div>', 
 
     link: function(scope, element) { 
 
      scope.active = false; 
 
      directiveHint.push(scope); 
 
      var span = element.find('span')[1]; 
 
      scope.toggle = function($ev) { 
 
      scope.active = !scope.active; 
 
      closeOther(scope); 
 
      $ev.stopPropagation(); 
 
      } 
 

 
      function closeOther(scope) { 
 
      angular.forEach(directiveHint, function(sc) { 
 
       if (sc != scope) { 
 
       closeActive(sc) 
 
       } 
 
      }); 
 
      } 
 

 
      function closeAll() { 
 
      angular.forEach(directiveHint, function(sc) { 
 
       closeActive(sc) 
 
      }); 
 
      } 
 

 
      function closeActive(sc) { 
 
      if (sc.active) 
 
       sc.active = false; 
 
      } 
 

 
      function documentClick(event) { 
 
      scope.$apply(function() { 
 
       closeAll(); 
 
      }); 
 
      } 
 
      var $body = angular.element(document.body); 
 
      if (!$body.hasClass('hint-directive-click')) { 
 
      angular.element(document).bind('click', documentClick); 
 
      $body.addClass('hint-directive-click'); 
 
      } 
 

 
      scope.$on('$destroy', function() { 
 
      angular.forEach(directiveHint, function(sc, i) { 
 
       if (sc == scope) 
 
       directiveHint.splice(i); 
 
      }); 
 
      }) 
 
     } 
 
     } 
 
    } 
 
    ]);

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.split { 
 
    float: left; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.toggle { 
 
    display: inline-block; 
 
    width: 1em; 
 
    height: 1em; 
 
    background-color: green; 
 
} 
 
p { 
 
    float: left; 
 
} 
 
.message { 
 
    background-color: grey; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div class="split"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <p hint-directive> 
 
     Text1 
 
    </p> 
 
    </div> 
 
    <div class="split"> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <p hint-directive> 
 
     Text2 
 
    </p> 
 
    <label> 
 
     <input type="checkbox" ng-model="text3Enable">Enable text3</label> 
 
    <p hint-directive ng-if="text3Enable"> 
 
     Text3 
 
    </p> 
 
    </div> 
 
</div>