Fatal编程技术网
  • javascript/
  • Javascript Angular指令没有将css类添加到另一个元素

Javascript Angular指令没有将css类添加到另一个元素

javascript css angularjs

Javascript Angular指令没有将css类添加到另一个元素,javascript,css,angularjs,Javascript,Css,Angularjs,您好，我正在尝试一个angular指令在单击按钮时更改另一个元素的CSS，但是尽管console.log向我显示该类已添加，但在inspector中仍然没有该类 模态定向 angular.module('App.shared.modal') .directive('openModal', function (Config) { function link(scope, element, attrs) { element.bind('click', function() {

您好，我正在尝试一个angular指令在单击按钮时更改另一个元素的CSS，但是尽管console.log向我显示该类已添加，但在inspector中仍然没有该类

模态定向

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

  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
      };
    });
视图，该视图称为指令

<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>
应用程序结构

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


/*这是标题指令，这是按钮*/
/*这是模态分析*/
您可以检查$apply（）方法。因为您正在使用setTimeout（）方法。setTimeout（）是异步的，由JS引擎处理。不是Angular编译器，所以不知何故，您需要告诉Angular i Js引擎已更改某些内容，因此请尝试使用apply（）。我不知道这会起作用。我的一个代码是我做的这件事。它成功了。

您可以检查$apply（）方法。因为您正在使用setTimeout（）方法。setTimeout（）是异步的，由JS引擎处理。不是Angular编译器，所以不知何故，您需要告诉Angular i Js引擎已更改某些内容，因此请尝试使用apply（）。我不知道这会起作用。我的一个代码是我做的这件事。它成功了。

您不需要使用
超时来应用CSS。检查此处的简化示例：

您最好使用
addClass
，因为它受以下各项的支持：


对于
display:block
，我怀疑您的元素
#modalloin
不在那里，因为从我的示例来看，它正在工作：。
您不需要使用
timeout
来应用CSS。检查此处的简化示例：

您最好使用
addClass
，因为它受以下各项的支持：


对于
display:block
，我怀疑您的元素
#modalloin
不存在，因为从我的示例来看，它正在工作：。
但是css显示块也应该是工作的，但不是工作的，但是css显示块也应该是工作的，但不是工作的

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