16

余分な要素を追加せずに、一部のコンテンツをディレクティブに変換する方法はありますか?

例えば

指令：

{
    scope: {
        someParam: "="
    },
    link: function(scope, element, attrs){
        //do something
    },
    transclude: true,
    template:'<div ng-transclude></div>'
}

ソースhtml:

<div my-directive some-param="somethingFromController">
    my transcluded content: {{somethingElseFromController}}
</div>

この例では、余分な div がマークアップに追加されます。通常はこれで問題ありませんが、テーブル内でこのディレクティブを使用しようとしているため、div タグを追加すると問題が発生します。

また、指定しないtranscludeかtemplate、余分な div タグを削除しようと{{somethingElseFromController}}しましたが、「トランスクルードされた」コンテンツが分離されたスコープにあるため、現在は見つかりません。独立したスコープを作成する代わりに、リンク関数の attrs オブジェクトからディレクティブのパラメーターを取得できることはわかっていますが、scope.$apply() で文字列を評価する必要は避けたいと考えています。

これを達成する方法を知っている人はいますか？ありがとう！

4

3 に答える 3

8

@Vakeyが答えたのは、私が探していたものです。

しかし、今日のように、Angular のドキュメントには次のように書かれています。

関数に渡されるトランスクルード関数compileは非推奨です。たとえば、右側の外側のスコープを認識していないためです。代わりに、リンク関数に渡されるトランスクルード関数を使用してください。

そこで、 $compile ドキュメントに示されている例の一部として、代わりにcontroller(当面は) とその$transclude関数を使用しました。

controller: function($scope, $element, $transclude) {
            var transcludedContent, transclusionScope;

            $transclude(function(clone, scope) {
                $element.append(clone);
                transcludedContent = clone;
                transclusionScope = scope;
            });
        },
于 2015-08-17T19:20:31.573 に答える
7

これはAngularで実際に可能です。ng-repeat などのディレクティブがこれを行います。方法は次のとおりです。

{
    restrict: 'A',
    transclude: true,
    compile: function (tElement, attrs, transclude) {
        return function ($scope) {
            transclude($scope, function (clone) {
                tElement.append(clone);
            });
        };
    }
};

それで、ここで何が起こっているのですか？リンク中に、トランスクルージョンしようとしている要素であるクローンをディレクティブの要素に追加するだけです。Angular は $scope を clone 要素に適用するので、その要素内ですべての角度の利点を実行できます。

于 2014-01-17T19:34:01.553 に答える
4

@robの投稿について詳しく説明するには...

トランスクルージョンでは、ディレクティブが存在する/存在するタグのコンテンツのクローンである要素をAngularが作成する必要があります...コンテンツがテキストの場合、それはスパンでラップされます。

これは、$compile が呼び出されたときにスコープを適用する DOM 要素があるためです。

したがって、基本的に transclude は、できないのと同じ理由で要素を追加します$compile('plain text here {{wee}}')。

これで、 $interpolateでやろうとしているようなことを行うことができます。これにより、「blah {{foo}}」のような文字列のバインディングにスコープを適用できます....しかし、私はあなたが何をしようとしているのかわからないので、具体的な例を挙げることはできません。

于 2013-10-17T19:51:38.247 に答える