Angular指令未将CSS类添加到另一个元素

Question

Hi i am trying an angular directive changes the CSS of another element when a button is clicked,however despite the console.log shows me that the class was added, in the inspector still without the class. 嗨，我正在尝试在单击按钮时更改角度指令的另一个元素的CSS，尽管console.log向我显示添加了该类，但在检查器中仍然没有该类。

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 which is called the directive 视图称为指令

<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 Directive 标头指令

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

The app structure 应用程序结构

<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>

Answer 1

You do not need to use timeout to make the CSS applied. 您无需使用timeout即可应用CSS。 Check a simplified example here: JSFiddle . 在这里检查一个简化的示例： JSFiddle 。

You'd better use addClass as it is supported by angular.element : 您最好使用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');
    });

For the display: block , I am doubting that your element #modalLogin is not there, because from my example, it is working: JSFiddle . 对于display: block ，我怀疑您的元素#modalLogin不存在，因为在我的示例中，它正在工作： JSFiddle 。

Answer 2

You can check the $apply() method. 您可以检查$ apply（）方法。 because you are using setTimeout() method. 因为您正在使用setTimeout（）方法。 setTimeout() is asynchronous which is handled by the JS Engine. setTimeout（）是异步的，由JS引擎处理。 not Angular Compiler so somehow you need the way to tell the Angular that i Js engine have change something hence try to use apply(). 而不是Angular编译器，因此您需要以某种方式告诉Angular我的Js引擎已更改某些内容，因此请尝试使用apply（）。 I don't know this will work. 我不知道这行得通。 one of my code i have done this thing. 我的代码之一，我已经完成了这件事。 it worked. 有效。

Angular指令未将CSS类添加到另一个元素

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-08-27 08:50:57

解决方案2
0 2016-08-27 08:46:48

Angular指令未将CSS类添加到另一个元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-08-27 08:50:57

解决方案2 0 2016-08-27 08:46:48

解决方案1
2 已采纳 2016-08-27 08:50:57

解决方案2
0 2016-08-27 08:46:48