Question

简短背景：我试图编写一个指令来监听我的bootstrap下拉菜单的aria-expanded属性，因为我想在其值变为false时执行某些操作。据我所知，这是＆＃34; angularJS＆＃34;如果你想监视元素内部的类更改。

aria-expanded类在这个img元素中。我的指示名称为 overlay-monitor ：

<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-expanded变为false。但就目前而言，我只是试图触发警报，看看我是否做得对：

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

});

当我测试它时，警报没有显示。：（

我做错了什么？

请指教。谢谢！

P.S。我忘了提。我们不允许使用jQuery。再次感谢您的回复！

编辑：在阅读了$ watch之后，我尝试了以下代码：

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

});

好消息是警报弹出。坏消息是警报只说＆＃34; false＆＃34;。它永远不会发出警报（＆＃39; true＆＃39;）。：/

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

在自定义指令中查看属性 - AngularJS

2 个答案: