angularjs - 如何从 Controller 中添加 ng-show 功能？

Question

假设我有几个这样的元素:

<note ng-show="hasText()">
    {{text}}
</note>

我有这样的指令:

directive('note', function() {
    return {
        restrict: 'E',
        controller: 'NoteCtrl'
    }
})

还有这样的 Controller :

function NoteCtrl($scope, $element) {
    $scope.text = "Hello, world!";
    $scope.hasText = function() {
        return $scope.text.length > 0;
    }
}

这将做的是显示注释是否有文本，否则隐藏它。

我想知道的是，有没有办法从 HTML 中删除 ng-show，然后从 Controller 中动态添加它？

例如，您可以尝试将其设为 NoteCtrl 中的第一行，但它不起作用:

$($element).attr('ng-show', 'hasText()');

Answer 1

为了更接近 Angular 行为，我建议使用 ng-hide css 类。
从标记示例开始:

myApp.directive('note', function() {
    return {
        restrict: 'E',
        controller: function($scope) {
            $scope.text = "Hello, world!";
            $scope.clearText = function() {
                $scope.text = '';
            }
        },
        link: function($scope, $element) {
            $scope.$watch('text.length', function(len){
                if (len <= 0) {
                    $element.addClass("ng-hide");
                } else {
                    $element.removeClass("ng-hide");
                }
            });
        }
    }
})

这样，如果定义了自定义隐藏类，它也将适用于此。
(参见 https://docs.angularjs.org/api/ng/directive/ngHide)