如何从控制器内添加ng显示功能？

比方说，我有一个几个元素是这样的：如何从控制器内添加ng显示功能？

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

而且我有一个这样的指令：

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

和控制器这样的：

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

这是什么意志如果有文本，则显示该注释，否则将其隐藏。

我想知道的是，有没有办法从HTML中删除ng-show，并从控制器内动态添加它？

例如，你可以尝试把这项工作作为第一行NoteCtrl做到这一点，但它不工作：

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

来源

2013-01-21 cilphex

此控制器在指令范围内吗？因为否则你做错了什么：在AngularJS中，所有的视觉行为都应该是HTML格式的，并且只能在控制器上进行数据操作。 –

我不知道你的意思。是的，控制器在指令中指定。你可以在代码中看到。 – cilphex

所有这一切ngShow确实是可变地设定CSS display属性设置为“无” 。所以，最容易做的事情只是复制该功能：

$scope.$watch('text.length', function hideWhenEmpty(length){ 
    element.css('display', length > 0 ? '' : 'none'); 
});

来源

2013-01-21 06:49:13

结合@ Valentyn的和@乔希的输入，这里有一个指令，只做数据操作的控制器，并使用链接功能的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){ 
       $element.css('display', len > 0 ? '' : 'none'); 
      }); 
     } 
    } 
})

HTML：

<note> 
    {{text}} 
    <br><a ng-click="clearText()">clear text</a> 
</note>

Fiddle。

来源

2013-01-22 02:12:13

为了更接近角度行为，我建议使用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）

来源

2014-07-16 10:03:43

如何从控制器内添加ng显示功能？

回答

相关问题