Question

我正在使用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>

我花了很长时间才弄明白问题是什么。

我在这里遗漏了什么吗？

为什么在通过contains指令转换指令时，使用编译部分中定义的变量不起作用？

这是Angular中的错误吗？

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

提前感谢任何启蒙！

AngularJS：css操作在transcluded指令内失败

0 个答案: