Angularjs ng-Show und die Richtlinie nicht

Question

funktioniert Ich habe folgende html:

<div class="modal-dialog" ng-controller="modal-ctrl" ng-show="showModal" execute-on-esc> 

Angularjs App:

app.controller('modal-ctrl', function($scope) { 
    $scope.showModal = true; 
}); 

app.directive('executeOnEsc', function ($document) { 
    return { 
     restrict: 'A', 
     link: function (scope) { 
      return $document.bind('keydown', function(event) { 
       event.which === 27? scope.showModal = false : false; 
      }); 
     } 
    } 
}); 

Alles funktioniert gut, $ scope.showModal chages zu falsch, aber ng-show reagiert nicht auf diese Änderung. Warum? Console.log zeigt, dass sich $ scope.showModal ändert. Wo ist das Problem?

Answer 1

return $document.bind('keydown', function(event) { 
    event.which === 27? scope.showModal = false : 
}); 

Du einen Ereignis-Listener zu schaffen, führt dies Zuhörer außerhalb eines Winkelzyklus verdauen. Daher müssen Sie angular angeben, um einen neuen Digest-Zyklus zu starten, damit die Änderungen übernommen werden. Sie können scope.$apply, dies zu tun:

return $document.bind('keydown', function(event) { 
    scope.$apply(function(){ 
     event.which === 27? scope.showModal = false : 
    }); 
}); 

Demo

var app = angular.module("app", []); 
 

 
app.controller('modal-ctrl', function($scope) { 
 
    $scope.showModal = true; 
 
}); 
 

 
app.directive('executeOnEsc', function($document) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope) { 
 
     return $document.bind('keydown', function(event) { 
 
     scope.$apply(function() { 
 
      event.which === 27 ? scope.showModal = false : false; 
 
     }); 
 
     }); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div class="modal-dialog" ng-controller="modal-ctrl" ng-show="showModal" execute-on-esc> 
 
    My Modal 
 
    </div> 
 
</div>