Question

我的自定义指令定义如下：

.directive("myDirective", [
    return {
        restrict: "E",
        replace: true,
        terminal: true, // otherwise we won't be able to compile a template
        controller: "MyCtrl",
        scope: {
        ...
        },

        compile: function (element, attrs) {
            element.html("");
            element.removeClass();

            ...

            return {
            post: function (scope, iElement, iAttrs, controller) {
                loadTemplate(templUrl).then(function (templateElement) {
                //iElement.replaceWith(templateElement);
                iElement.append(templateElement);
                var teLinkingFn = $compile(templateElement);
                teLinkingFn(scope);
                var modal = $("div.modal", templateElement);
                if (modal.length > 0) {
                    scope._modal = modal;
                    templateElement.removeClass();
                    if (iAttrs.class) {
                        $("button", templateElement).eq(0).addClass(iAttrs.class);
                    }
                }
            });
...

现在，我将它与ng-if：

一起使用

<my-directive ... ng-if="some_criteria"/>

ThC问题是当我替换原始元素和some_criteria更改时，我仍然可以看到自定义html。但是，如果我追加指令它会起作用（消失）。我无法想象如何正确地做到这一点。请帮忙。

Answer 1

当您使用模板文件中加载的内容替换原始标记<my-directive ... ng-if="some_criteria"/>时，您将丢失原始标记中的ng-if指令。您可以在模板文件中添加ng-if，也可以不使用替换功能。

您是否有特殊原因希望将其替换？

angularjs指令动态html替换元素和ng-if

1 个答案: