如何在不重新计算表达式的情况下从ng-show属性中获取布尔值？

I am working on a project with lots of content dynamically shown / hidden using ng-show. Some of the expressions being evaluated are verbose. Something like this...

我正在开发一个项目,其中包含使用ng-show动态显示/隐藏的大量内容。一些被评估的表达式是冗长的。这样的东西......

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
>...</div>

I need to make this content ADA WCAG 2.0 compliant. As part of that effort I am adding aria-disabled attributes to all of the hidden content. The aria-disabled attribute will have a true or false value. So, if the content is hidden the aria-disabled attribute will be true, and if the content is visible it will be false. In other words, it will always be the inverse of the ng-show value and it needs to update dynamically as the ng-show attribute's value changes.

我需要使这个内容符合ADA WCAG 2.0标准。作为这项工作的一部分,我将aria-disabled属性添加到所有隐藏内容中。 aria-disabled属性将具有true或false值。因此,如果内容被隐藏,则aria-disabled属性将为true,如果内容可见则为false。换句话说,它将始终是ng-show值的倒数,并且需要在ng-show属性的值更改时动态更新。

For obvious reasons (E.g. maintainability, readability, bloat reduction, etc), I want to avoid duplicating the code and inverting each value with a bang, like this...

由于显而易见的原因(例如可维护性,可读性,膨胀减少等),我想避免重复代码并用一个爆炸反转每个值,像这样......

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
 aria-disabled="!some.object.with.nested.values
    && !some.other.object.with.other.nested.values
    && !also.looking.at.the.value.in.this.object
    && obj.example.something.goes.here"
>...</div>

I would prefer to do something like this...

我宁愿做这样的事......

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
 aria-disabled="{{invertNgShow(this)}}"
>...</div>

The idea is to use a custom invertNgShow function to get the Boolean value of the element's ng-show attribute, invert the value and return. Needless to say, I do not have a working solution yet.

我们的想法是使用自定义的invertNgShow函数来获取元素的ng-show属性的布尔值,反转该值并返回。毋庸置疑,我还没有一个有效的解决方案。

Thanks in advance.

提前致谢。

2 个解决方案

#1

As ngShow accepts expressions. Just assign the calculated value to a variable and use it anywhere in the controller as below,

因为ngShow接受表达式。只需将计算值分配给变量并在控制器中的任何位置使用它,如下所示,

  v1: <input type="checkbox" ng-model="v1">
  v2: <input type="checkbox" ng-model="v2">
  v3: <input type="checkbox" ng-model="v3">
  ng-show: <input type="checkbox" ng-model="v123" disabled>
  <p ng-show="(v123 = (v1 && v2 && v3))" aria-disabled="{{!v123}}">Hello {{name}}!</p>

A Demo: http://plnkr.co/edit/jg56QFsV6ohLu59EPS2H?p=preview

演示:http://plnkr.co/edit/jg56QFsV6ohLu59EPS2H?p=preview

#2

Ultimately, I ended up creating a directive for this...

最终,我最终为此创建了一个指令......

myApply.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-hidden', !scope.$eval(attrs.ngShow));  
        });
      }
    };
});

...and the HTML looks like this...

......而HTML看起来像这样......

<div ng-show="some.object.value" ng-aria >...</div>

As you can see the directive takes the value of ng-show, inverts it, adds an aria-hidden attribute and applies the inverted ng-show value to the attribute. Perfect, and far less markup.

正如您所看到的,该指令采用ng-show的值,将其反转,添加aria-hidden属性并将反转的ng-show值应用于该属性。完美,而且标记要少得多。

#1