Невозможно изменить пользовательскую директиву с помощью ngShow

Question

Я пытаюсь анимировать специальную модальную директиву с помощью ng-show, следуя примеру, показанному на веб-сайте Angular (пример находится в самом низу страницы). Однако мне не удавалось заставить его работать.

Я использую Angular 1.3.x с Bootstrap 3.3.x. Я не использую Angular UI Bootstrap, потому что специальная модальная директива более гибкая для моих нужд.

Вот что у меня до сих пор:

Modal.js:

angular.module('plunker', []) 
    .directive('myModal', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     templateUrl: 'modal.html', 
     controller: 'ModalCtrl', 
     link: function(scope, element, attrs) { 
     scope.showModal = false; 

     if (attrs.title === undefined) { 
      scope.title = 'Modal Title Placeholder'; 
     } else { 
      scope.title = attrs.title; 
     } 

     scope.$watch('showModal', function(isHidden) { 
      if (isHidden) { 

      } else { 

      } 
     }); 
     } 
    }; 
    }).controller('ModalCtrl', ['$scope', 
    function($scope) { 
     $scope.$open = function() { 
     $scope.showModal = true; 
     }; 

     $scope.$close = function() { 
     $scope.showModal = false; 
     }; 
    } 
    ]); 

modal.html:

<div role="dialog" tabindex="-1" class="modal modal-fade" ng-show="showModal"> 
    <div class="modal-backdrop" style="height: 100%"> </div> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3 class="modal-title">{{title}}</h3> 
      </div> 
      <div class="modal-body"> 
       <div class="content" ng-transclude></div> 
      </div> 
     </div> 
    </div> 
</div> 

modal.css:

.modal-fade { 
    opacity: 1; 
    display: block !important; 
} 

.modal-fade .ng-hide-add .ng-hide-add-active, 
.modal-fade .ng-hide-remove .ng-hide-remove-active { 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    transition: all linear 1s; 
} 

.modal-fade .ng-hide { 
    opacity: 0; 
    display: none; 
} 

index.html:

<my-modal title="Example Modal"> 
    <p>Some text</p> 
    <button type="button" class="btn btn-primary" ng-click="$close()">Close</button> 
</my-modal> 
<button type="button" class="btn btn-primary" ng-click="$open()">Open Modal</button> 

Все остальное отлично работает, то есть модаль появляется и может быть закрыт, но анимации нет.

Plunkr ссылка на код.

Answer 1

Антенные крючки AngularJS реализованы в отдельном модуле под названием ngAnimate.

нагрузки сценарий:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.min.js"></script> 

И добавить модуль:

angular.module('plunker', ['ngAnimate']) 

Во-вторых, вы должны примыкать классы CSS, чтобы сформировать правильные селекторы.

Вместо:

.modal-fade .ng-hide { 

Do:

.modal-fade.ng-hide { 

Первый является-потомок селектор, который выбирает элементы, которые имеют класс ng-hide и являются потомками для элементов с классом modal-fade.

Второй выбирает элементы, которые имеют оба класса, что вам нужно.

Для этого сценария все, что вам нужно:

.modal-fade { 
    -webkit-transition: all linear 1s; 
    -moz-transition: all linear 1s; 
    transition: all linear 1s; 
    display: block; 
} 
.modal-fade.ng-hide { 
    opacity: 0; 
} 

display: block только нужно переопределить display: none из modal класса Bootstrap.

Демо:http://plnkr.co/edit/h0tNOn6Xj31OGmHqulr5?p=preview