Question

我需要为每个元素添加一个属性，这个元素与ngShow相反（对于屏幕阅读器）。我试图提出自定义指令来实现相同的目的，并避免重复，如

<div id="1" ng-show="myform.somecondition" aria-disabled="!myform.somecondition">

我的方法如下

<div id="1" ng-show="myform.somecondition" ng-aria>


myapp.directive('ngAria', function ($compile) {
  return {
    restrict: 'A',
    replace: false, 
terminal: true, //this setting is important to stop loop
priority: 1000, //this setting is important to make sure it executes before other directives
compile: function compile(element, attrs) {
  element.removeAttr("ng-aria");
  element.attr('aria-disabled', !attrs.ngShow);
  return {
    pre: function preLink(scope, iElement, iAttrs, controller) {  },
    post: function postLink(scope, iElement, iAttrs, controller) {  
      $compile(iElement)(scope);
    }
  };
}
 };
});

呈现页面时，元素会正确呈现。但是，在条件元素（myform.somecondition）的后续更改中，aria-disabled未更新。请建议如何解决这个问题。感谢。

Answer 1

您可以简化指令，包括删除terminal: true，这会导致您所表达的问题。

在本地范围内的$ watch内部，使用$eval来评估ng-show中包含的表达式，并将其替换为aria-disabled的值：

.directive('ngAria', function ($compile) {
  return {
    restrict: 'A',
    replace: false, 
    priority: 1000, 
    link: function postLink(scope, elem, attrs) {  
      elem.removeAttr("ng-aria");
      scope.$watch(attrs.ngShow, function(){
        elem.attr('aria-disabled', !scope.$eval(attrs.ngShow));  
      });
    }
 };
});

Demo

angularjs自定义指令重复属性

1 个答案: