Question

我正在尝试创建新的指令，根据表达式的结果向元素添加/删除类。基本上非常类似于ng-hide和ng-show。我的指令接收表达式但从不解析它。表达式始终被视为字符串。

App.directive('ngVisible',
function ($parse) {
    return function (scope, element, attrs) {
        if ($parse(attrs.ngVisible))
            element.addClass("ng-visible");
        else
            element.addClass("ng-invisible");

        console.log('attrs.ngVisible', attrs.ngVisible);

        console.log('$eval result', scope.$eval(attrs.ngVisible));
    }

 }

);

第一个日志语句将正确的表达式显示为字符串。

第二个日志语句显示未定义。

用法：

<span class="text-danger" ng-visible="companiesForm.cName.$error.required && company==editingCompany"><label class=" label label-danger">Name required</label></span>

Answer 1

对于任何尝试类似的人。这是最终指令：

App.directive('ngVisible',
  function () {
    return {
        restrict: 'A',

        link: function (scope, element, attrs) {
            scope.$watch(attrs.ngVisible, function (value) {

                if (value)
                    element.removeClass("ng-invisible");
                else
                    element.addClass("ng-invisible");

            });
        }
    }

});

类别：

.ng-invisible {
visibility: hidden;
}

用法：

<span ng-visible="companiesForm.cName.$error.required">Required!</span>

AngularJS属性指令不评估表达式

1 个答案: