Угловая директива не добавляет класс css к другому элементу

Привет, я пытаюсь, чтобы угловая директива меняла CSS другого элемента при нажатии кнопки, однако несмотря на то, что console.log показывает мне, что класс был добавлен, в инспекторе все еще без класса.Угловая директива не добавляет класс css к другому элементу

ModalDirective

angular.module('App.shared.modal') 
.directive('openModal', function (Config) { 

    function link(scope, element, attrs) { 
    element.bind('click', function() { 
     var modal = angular.element(document.querySelector('#' + attrs.openModal)).css('display', 'block'); 
     setTimeout(function(){ modal.className += ' modal-in'}, 10); 
    }); 
    } 
    return { 
    restrict: 'AEC', 
    link: link 
    }; 
});

View, который называется директивой

<header class=""> 
    <div class="u-max-full-width"> 
    <div class="row homehubusa-header"> 
     <div class="one-third column"> 
     <img src="./imgs/homehubusa.png" alt="logo homehubusa" class="logo"/> 
     </div> 
     <div class="two-thirds column"> 
     <ul class="menu u-pull-right"> 
      <li> 
      <a href="#">HomesUSA</a><span class="separator">&nbsp;</span> 
      </li> 
      <li> 
      <a href="#">Support</a><span class="separator">&nbsp;</span> 
      </li> 
      <li> 
      <a href="#">Contact Us</a> 
      </li> 
      <li class="callsign"> 
      <a href="#" class="button button-danger" open-modal="modalLogin">Sign in</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</header>

Директива Header

angular.module('App.shared.header') 
    .directive('appHeader', function (Config) { 

     function link(scope) { 
     scope.navLinks = [ 
      {title: 'Home', href: 'home'}, 
      {title: 'Help', href: 'seed-help'} 
     ]; 
     } 
     return { 
     templateUrl: Config.rootPath + 'shared/header/header-view.html', 
     link: link, 
     replace: true 
     }; 
    });

Приложение Структура

<body ng-app="App"> 
    <app-header></app-header> /* This is the header directive, here is the button */ 
    <div class="ng-view"></div> /* Here is the modal */ 
    <app-footer></app-footer> 
</body>

источник

2016-08-27 pedro luis

Чтобы применить CSS, вам не нужно использовать timeout. Проверьте здесь упрощенный пример: JSFiddle.

Лучше использовать addClass, как она поддерживается angular.element:

link: function(scope, element, attrs) { 
    element.bind('click', function() { 
     var target = angular.element(document.querySelector('#test')); 
     target.css('display', 'block'); 
     target.addClass('red'); 
    });

Для display: block, я сомневаюсь, что ваш элемент #modalLogin не существует, потому что из моего примера, он работает: JSFiddle.

источник

2016-08-27 08:50:57 Joy

но блок отображения css также должен работать, но не работать –

Вы можете проверить метод $ apply(). потому что вы используете метод setTimeout(). setTimeout() является асинхронным, который обрабатывается JS Engine. а не угловой компилятор, так что вам нужно как-то рассказать об Угловом, что у i Js-двигателя есть что-то изменить, поэтому попробуйте использовать apply(). Я не знаю, что это сработает. один из моих кодов я сделал это. это сработало.

источник

2016-08-27 08:46:48 Mkpatel

Угловая директива не добавляет класс css к другому элементу

ответ

Смежные вопросы