Angular.js нг-шоу и директива не работает

Question

Angular.js нг-шоу и директива не работает

0

У меня есть следующий 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. Где проблема?

Artem Z 24 июль 2016, в 21:14

Источник

0

Когда вы установили значение showModal для console.log?
Rahul Arora 24 июль 2016, в 18:56
0

return $ document.bind ('keydown', function (event) {event.which === 27? scope.showModal = false: false; console.log (scope.showModal);}); Разные корни, верно?
Artem Z 24 июль 2016, в 18:57
0

заменить ng-show на ng-hide, чтобы проверить дисплей?
Naga Sai A 24 июль 2016, в 19:00
0

если это работает, замените ng-show = "! showModal"
Naga Sai A 24 июль 2016, в 19:00
0

Спасибо, Нага Сай, но на этот вопрос ответил Патрик Эванс.
Artem Z 24 июль 2016, в 19:15

Показать ещё 3 комментария

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Когда вы установили значение showModal для console.log?
return $ document.bind ('keydown', function (event) {event.which === 27? scope.showModal = false: false; console.log (scope.showModal);}); Разные корни, верно?
заменить ng-show на ng-hide, чтобы проверить дисплей?
если это работает, замените ng-show = "! showModal"
Спасибо, Нага Сай, но на этот вопрос ответил Патрик Эванс.

Patrick Evans · Accepted Answer · 2016-07-24T16-57-00.000Z

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

Вы создаете прослушиватель событий, этот слушатель выполняется вне цикла углового дайджеста. Таким образом, вы должны сказать, что нужно начинать новый цикл дайджеста, чтобы изменения были подобраны. Вы можете использовать scope. $ Apply для этого:

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>