Angular.js NG-ショーとディレクティブは動作しません

Question

I次のようなHTMLがあります。

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

Angular.jsアプリ：

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

すべてがうまく機能し、$ scope.showModalのchagesへのfalseですが、ng-showはこの変更に応答しません。どうして？ Console.logは、$ scope.showModalが変更されることを示しています。 どこに問題がありますか？

Answer 1

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

このリスナーは、角度ダイジェストサイクルの外で実行されます。そのため、変更内容を取得するために、新しいダイジェストサイクルを開始するには、角度を指定する必要があります。あなたがshowModalの値をCONSOLE.LOGたのはいつ

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

デモ

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>