angularjs自定义指令重复属性

debugcn 发表于 Dev

天

我需要为每个元素添加一个属性，该属性与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的功能不会得到更新。请提出如何解决该问题的建议。谢谢。

马克·克莱恩

您可以简化指令，包括remove 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));  
      });
    }
 };
});

演示版

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。