カスタムディレクティブの属性を見る - AngularJS

Question

簡単な背景：値が偽になったら何かをしたいので、私はブートストラップドロップダウンメニューのaria-expanded属性を聞くディレクティブを書こうとしています。私が理解していることから、要素内のクラスの変更を監視したい場合、これは "angularJS"の方法です。

aria-expandedクラスはこのimg要素内にあります。私のディレクティブの名前はオーバーレイ・モニターです：

<img ng-init="displayMainMenu()" overlay-monitor id="nav-burger" uib-dropdown-toggle ng-disabled="disabled" ng-click="sMainMenu=true; isSubMenu=resetMenu(); getLinks(); bStopPropagation=true;" src="img/burger.png"> 

私は実際にそれが何をしたいのかARIA-拡大がfalseになった場合、私はページ上の持っている不透明なオーバーレイを閉じることです。しかし、今のところ、私はちょうど私が右のそれをしなかったかどうかを確認するために、アラートをトリガーしようとしている：私はそれをテストしたとき

app.directive('overlayMonitor', function() { 
return { 
    restrict: 'A', 
    scope: { ariaExpanded: '@' }, 
    link: function ($scope, element, attrs) { 
     if (element.attrs('aria-expanded') == "true") { 
      alert('directive'); 
     } 
    } 
} 

}); 

、警告は表示されませんでした。 :(

私が間違って何をしましたか？

お知らせください。ありがとうございます！

PS私は、我々がjQueryのを使用することはできません。おかげで再びあなたの応答を。言及するのを忘れてしまった！

---

編集：

0： $腕時計について読んだ後、私は次のコードを試してみました

良いニュースは、アラートがポップアップしたことです。悪い知らせは警告だけが「偽」と言います。それは警告を発したことはありません（ '真'）。 ：/

Answer 1

あなたはこのように使用することができます：

if (attrs.ariaExpanded) { // instead of element.attrs('..') 
    alert('directive'); 
} 

Answer 2

linkが一度に実行される機能、レンダリングディレクティブ。

したがって、変数の変更を追跡するには、$watchを使用する必要があります。

は、次の試してみてください。

app.directive('overlayMonitor', function() { 
return { 
    restrict: 'A', 
    scope: { ariaExpanded: '@' }, 
    link: function (scope, element, attrs) { 
    scope.$watch(function(){ return attrs.ariaExpanded; }, 
    function(val){ 
     if (!val) { 
     alert('directive'); 
     } 
    }); 
} 
} 
});