Winkelreglerfunktion scheint nicht konsequent zu arbeiten, wenn innerhalb Richtlinie

Question

In meinem HTML Ich habe so etwas wie dieses

genannt

<div class="form-group small-spacer" ng-repeat="bar in ctrl.foo.bars track by $index"> 
    //irrelevant stuff deleted 
    <div class="col-md-1 col-xs-3"> 
     <btn class="btn btn-block" double-click="ctrl.removeBar($index)" double-click-class="btn-warning btn-danger">X</btn> 
    </div> 
</div> 

ich eine einfache Richtlinie, deren Zweck haben, ist nur sicherstellen, der Benutzer zweimal klickt, bevor Sie alles überstürzt.

function doubleClick($document) { 
    return { 
     restrict: 'A', 
     scope: { 
      doubleClick: '&' 
     }, 
     link: function($scope, elem, attr) { 
      var classes = attr.doubleClickClass.split(' '); 
      var warningClass = classes[0], dangerClass = classes[1]; 

      //used to ensure user clicks twice 
      var bIsTargeted = false; 

      //add the inital warning class 
      elem.addClass(warningClass); 

      var checkClick = function(event){ 
       if(!elem[0].contains(event.target)){ 
        if (bIsTargeted){ 
         elem.removeClass(dangerClass); 
         elem.addClass(warningClass); 
        } 
        bIsTargeted = false; 
       }else{ 
        if (bIsTargeted){ 
         $scope.doubleClick(); 
        }else{ 
         elem.removeClass(warningClass); 
         elem.addClass(dangerClass); 
        } 

        bIsTargeted = !bIsTargeted; 
       } 
      } 

      $document.on('click', checkClick); 

      $scope.$on('$destroy', function() { 
       console.log('DESTROY!'); 
       $document.off('click', checkClick); 
      }); 
     } 
    }; 
} 

In meiner ctrl.removeBar Funktion:

this.removeBar = function(index){ 
    console.log('deleted' + index) 
    vm.foo.bars.splice(index, 1); 
    console.log(vm.foo.bars); 
} 

Wenn ich den Doppelklick klicken BTN zweimal die "gelöscht" log von ctrl.removeBar zeigt, und das zweite Protokoll bestätigt, dass die Das Balkenobjekt wird aus dem Balkenarray gespleißt. Allerdings aktualisiert das DOM die meiste Zeit nicht und wenn es etwa ein Viertel der Zeit passiert, wird es 5 Sekunden später aktualisiert. In den Fällen, in denen es nicht aktualisiert wird, scheint es, als ob der Bereich nicht zerstört wird, weil es kein "DESTROYED" -Log von $ scope.on ('$ destroy') gibt. Ich habe versucht, ein ng-Klick auf die Schaltfläche wie so hinzufügen:

<btn class="btn btn-block" ng-click="ctrl.removeBar($index)" double-click="ctrl.removeBar($index)" double-click-class="btn-warning btn-danger">X</btn> 

In diesem Fall wird die DOM sofort 100% der Zeit verändert und ebenfalls für die „Zerstörte“ log. Das führt mich zu der Annahme, dass ich etwas durcheinander gebracht habe, wenn ich die Funktion aus der Direktive aufgerufen habe. Irgendwelche Ideen, was ich falsch gemacht habe?

Answer 1

Ihr Click-Handler muss $scope.$apply() tun, nachdem Änderungen am AngularJS-Modell vorgenommen wurden, damit das Framework das DOM aktualisieren kann.

Weitere Informationen finden Sie unter AngularJS $rootScope API Reference -- $apply.