Question

如果我有一个指令，它已经传递了传递给它的内容：

<my-dir>
    <div class="content"></div>
</my-dir>

并且该指令有自己的模板：

<div>
    <div class="transcluded-content"></div>
    <button type="button" class="extra-content"></button>
</div>

那么我如何转换内容，然后将一个角度属性应用于该被抄送的内容，以便我最终得到：

<my-dir>
    <div class="transcluded-content">
        <div class="content" ng-style="{'color':'red'}"></div>
    </div>
    <button type="button" class="extra-content"></button>
</my-dir>

如您所见，样式color:red已应用于已转换的内容。每次我在编译函数中添加ng-style，然后angular忽略它，并且不将其作为属性处理，因此没有style="color:red"通过角度添加到该元素。

编辑：ngAttribute编译，但控制器运行两次

我还有问题。我需要帖子链接功能中的$compile，但现在我的控制器上的所有功能在单击时运行两次。我假设该指令正在编译两次？

compile: function compile(tElement, tAttrs) {
    return function (scope, element, attrs, controllers, transclude) {
        transclude(function (clone) {
            element[0].getElementsByClassName('multi-carousel-inner')[0].append(clone[1]);
            var $item = element[0].getElementsByClassName("content")[0];
            $item.setAttribute('ng-style', "{'color':'red'}");
        });
        $compile(element.contents())(scope);
    }
}

编辑2：

我认为这很有效。从：

Angularjs directive $compile causing ng-click to fire twice

我刚刚再次编译了元素

transclude(function (clone) {
    element[0].getElementsByClassName('transcluded-content')[0].append(clone[1]);
    var $item = element[0].getElementsByClassName("content")[0];
    $item.setAttribute('ng-style', "{'color':'red'}");
    $compile($item)(scope);
});

将ngAttribute添加到已转换的内容

0 个答案: