10

キーと値のペアを表示する非常に単純なディレクティブを作成しました。トランスクルージョンされたコンテンツが空の場合 (長さゼロまたは空白のみ)、要素を自動的に非表示にできるようにしたいと考えています。

ディレクティブ内からトランスクルージョンされるコンテンツにアクセスする方法がわかりません。

app.directive('pair', function($compile) {
  return {
    replace: true,
    restrict: 'E',
    scope: {
      label: '@'
    },
    transclude: true,
    template: "<div><span>{{label}}</span><span ng-transclude></span></div>"
  }
});

たとえば、次の要素を表示したいと考えています。

<pair label="My Label">Hi there</pair>

ただし、次の 2 つの要素はテキスト コンテンツを含まないため、非表示にする必要があります。

<pair label="My Label"></pair>
<pair label="My Label"><i></i></pair>

私はAngularを初めて使用するので、この種のことをすぐに処理できる優れた方法があるかもしれません。どんな助けでも大歓迎です。

4

6 に答える 6

1

毎回 ng-show を使用したくない場合は、自動的に実行するディレクティブを作成できます。

.directive('hideEmpty', ['$timeout', function($timeout) {

    return {
        restrict: 'A',

        link: {
            post: function (scope, elem, attrs) {
                $timeout(function() {
                    if (!elem.html().trim().length) {
                        elem.hide();
                    }
                });
            }
        }
    };

}]);

その後、任意の要素に適用できます。あなたの場合は次のようになります。

<span hide-empty>{{label}}</span>
于 2016-06-01T11:19:39.457 に答える
1

以前に提供された回答は役に立ちましたが、私の状況を完全に解決することはできなかったので、別のディレクティブを作成して別の解決策を考え出しました。

restrict: 'A'すべての要素の子ノードにテキストがあるかどうかを単純にチェックする、属性ベースのディレクティブ (つまり ) を作成します。

function hideEmpty() {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            let hasText = false;

            // Only checks 1 level deep; can be optimized
            element.children().forEach((child) => {
                hasText = hasText || !!child.text().trim().length;
            });

            if (!hasText) {
                element.attr('style', 'display: none;');
            }
        }
    };
 }

angular
    .module('directives.hideEmpty', [])
    .directive('hideEmpty', hideEmpty);

メイン要素のみを確認したい場合：

link: function (scope, element, attr) {
    if (!element.text().trim().length) {
        element.attr('style', 'display: none;');
    }
}

私の問題を解決するために必要だったのは、子ノードがあるかどうかを確認することだけでした。

link: function (scope, element, attr) {
    if (!element.children().length) {
        element.attr('style', 'display: none;');
    }
}

YMMV

于 2015-12-03T18:43:28.217 に答える