2

次のような要素がいくつかあるとしましょう。

<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;
    }
}

これにより、テキストがある場合はメモが表示され、そうでない場合は非表示になります。

私が知りたいのはng-show、HTML から削除して、コントローラー内から動的に追加する方法はありますか?

たとえば、これを の最初の行にすることで実行できますが、うまくいきNoteCtrlません。

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

3 に答える 3

3

角度のある動作にさらに近づくには、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-16T10:03:43.500 に答える
1

@Valentynと@Joshの入力を組み合わせて、コントローラーでデータ操作のみを行い、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>

フィドル。

于 2013-01-22T02:12:13.527 に答える
1

ngShow が行うことは、CSSdisplayプロパティを可変的に「none」に設定することだけです。したがって、最も簡単な方法は、その機能を複製することです。

$scope.$watch( 'text.length', function hideWhenEmpty(length){
  element.css('display', length > 0 ? '' : 'none');
});
于 2013-01-21T06:49:13.530 に答える