角度ディレクティブが別の要素に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 
    }; 
});

ディレクティブ

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

ヘッダー指令

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それはangular.elementによってサポートされているよう

あなたはより良いaddClassを使用したい：JSFiddle：display: blockについては

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

を、私は私の例から、それが働いているので、あなたの要素#modalLoginが、そこではないことを疑っています。

出典

2016-08-27 08:50:57 Joy

でもCSS表示ブロックは機能するはずですが動作しません –

$ apply（）メソッドをチェックすることができます。 setTimeout（）メソッドを使用しているためです。 setTimeout（）はJSエンジンによって処理される非同期です。 Angular Compilerではなく、何らかの理由でAngularにi Jsエンジンが何か変更を加えてapply（）を使用しようとしていることを伝える必要があります。これがうまくいくかどうかわかりません。私のコードの一つは、このことをやったことです。出来た。

出典

2016-08-27 08:46:48 Mkpatel

角度ディレクティブが別の要素にCSSクラスを追加していない

答えて

関連する問題