Question

我试图将DOM中的元素转换为指令，然后通过更改其样式或向其添加事件侦听器来影响该transcluded元素。如果我使用transclude函数，我可以对clone元素执行这些操作。但是，如果我选择使用transclude函数，<ng-transclude>指令将变得多余。我希望能够改变被转换的元素，但不必手动放置克隆。

我来自Dojo背景，在那里我会使用data-dojo-attach-points来获取我想要的片段或者附加听众的钩子。我认为AngularJS会对如何处理这个问题有一些答案。

app.directive("hex-nest", function () {
    return {
        restrict: "EA",
        replace: true,
        transclude: true,
        template: (
            "<div>" +
                "<span>Hello</span>" +
                "<span>[WHERE_I_WANT_TO_TRANSCLUDE]</span>" +
                "<span>World</span>" +
            "</div>"
        ),
        badTemplate: (
            "<div>" +
                "<span>Hello</span>" +
                "<ng-transclude></ng-transclude>" +
                "<span>World</span>" +
            "</div>"
        ),
        link: function (scope, element, attrs, ctrl, transcludeFunc) {
            transcludeFunc(scope, function (clone) {
                clone.on("click", function () {
                    console.log("I was clicked");
                });
                // This will append to the end of the element, 
                // not in the middle of the children
                element.append(clone);
            });
        }
    };
});

我已经尝试编写嵌套指令，将传递的元素传递到应该去的位置，但这似乎不起作用。

上面的代码只是一个例子。我正在拍摄的最终结果是有一个指令，它将包装某种表单元素<input>或<select>，并生成一个表示该节点值的文本节点。每当您单击该文本节点时，将显示一个小模态，其中包含原始表单元素，类似于在Google的Material Design Data tables interaction document中设计小编辑对话框的方式。< / p>

我已经能够使用标准JavaScript以及使用JQuery的其他实现来完成此操作，其中我手动添加多个元素并绑定侦听器;但是我想要倾斜Angular，这就像一个路障。

Answer 1

将元素标签更改为您可以找到的名称：

    template: (
        "<div>" +
            "<span>Hello</span>" +
            "<my-transclude>[WHERE_I_WANT_TO_TRANSCLUDE]</my-transclude>" +
            "<span>World</span>" +
        "</div>"
    ),

然后找到它并追加它。

    link: function (scope, element, attrs, ctrl, transcludeFunc) {
        var myElem = element.find("my-transclude");
        transcludeFunc(scope, function (clone) {
            clone.on("click", function () {
                console.log("I was clicked");
            });
            //  
            // 
            myElem.append(clone);
        });
    }

如何在没有转换功能的情况下影响被转换的元素？

1 个答案: