4

トランスクルージョン コンテンツにイベント ハンドラーを追加する適切な方法は何ですか? ディレクティブのコンシューマーが独自のクリック ハンドラーをドキュメントに追加することを望んでいません。ディレクティブはそれを処理する必要があります。しかし、ng-transclude で渡されたコンテンツにハンドラーを正しく追加する方法がわかりません。

いじってください: https://jsfiddle.net/hoe71p0e/12/ (Angular.js と JSFiddle を動作させることができません。リンク関数が呼び出されていません)

foo.html

<my-foo>
    <button type="button">Foo</button>
</my-foo>

foo.js

return {
    template: "<div class='my-foo' data-ng-transclude></div>"
    link: function($scope, $elem, $attrs, $ctrl, $transclude) {
        $scope.foo = function() {
            console.log("this is never called");
        };

        $transclude(function(clone) {
            for (var i in clone) {
                if (clone[i].localName === "button") {
                    angular.element(clone[i]).attr("data-ng-click", "foo()");
                }
            }
        });
    }
};

期待される結果(ボタンをクリックすると foo が呼び出されます)

<div class="my-foo">
    <button type="button" data-ng-click="foo()">Foo</button>
</div>

実際の結果(ボタンをクリックしても何も起こりません)

<div class="my-foo">
    <button type="button">Foo</button>
</div>

data-ng-clickボタンの属性が欠落していることに注意してください。

また、私はこのようなものでいくつかの例を見てきました...

壊れた.js

$transclude(function(clone) {
    angular.element(clone).find("button");
});

.find()...しかし、検査官はクローンに「ボタン」が含まれていると考えているようですが、結果が返されないため、それらは失敗します。

4

1 に答える 1