3

我正在使用 angularjs 1.3.15

我创建了一个像这样的简单指令：

myModule.directive('myContainerDirective', function () {
        return {
            restrict: 'EA',
            transclude: true,
            template: '<div ng-transclude></div>'
        };

还有另一个要嵌入的指令：

myModule.directive('myTranscludedDirective', function () {
        return {
            restrict: 'EA',
            template: '<span id="myId" style="left: 2px;">THING</span>',
            compile: function (element, attributes) {

                var myChildCompile = angular.element(element.children()[0]);

                return {

                    post: function (scope, element, attributes) {

                         var myChildPostLink = angular.element(element.children()[0]);

                         //CASE 1: this will work if this directive isn't transcluded
                         myChildCompile.on("click", testHandler);

                         //CASE 2: this work in either case (transcluded or not)
                         myChildPostLink.on("click", testHandler);


                    }

                }
            }
        }
    });

我像这样使用它们（仅适用于 CASE 2）：

<div my-container-directive>
    <my-transcluded-directive></my-transcluded-directive>
</div>

这（适用于案例 1 和 2）：

<div>
    <my-transcluded-directive></my-transcluded-directive>
</div>

我花了很长时间才弄清楚问题出在哪里。

我在这里错过了什么吗？

当指令通过包含指令被嵌入时，为什么使用编译部分中定义的变量不起作用？

这是Angular中的错误吗？

我猜transclusion会克隆模板，所以在这种情况下，myChildCompile不是链接中使用的对象，即translusion案例？

提前感谢您的任何启发！

4

0 回答 0