如何從控制器內添加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顯示功能？

回答

相關問題