AngularJS 有条件地添加指令

Question

我有一个可以编辑的表单。我正在尝试在用户单击按钮时设置 Summernote 插件。

例如，这是表单header，当edit为真时，summernote应该被初始化，edit为假时被销毁。

<div class="card-header" toggleSummerNote>
  <h2>{{questionnaire.description.title}}</h2>
</div>

如何使 summernote 指令成为条件指令？我尝试使用此指令，但它不起作用。有什么建议吗？

app.directive('toggleSummerNote', function ($compile) {
    return {
        restrict: 'A',
        replace: false,
        terminal: true,
        priority: 1000,
        link: function (scope, element, attrs) {
            scope.$watch('edit', function () {
                console.log(scope.edit);
                if (scope.edit) {
                    element.attr("summernote");
                    element.removeAttr("toggle-summer-note"); 
                    $compile(element)(scope);
                }
                else {
                  if (element.hasOwnProperty("summernote")) {
                      element.attr("toggle-summer-note");
                      element.removeAttr("summernote");
                      $compile(element)(scope);
                  }
                }
            });
        }
    };
});

解法：

根据下面保罗的回答，这对我有用：

app.directive('toggleSummerNote', function ($compile) {
    return {
        scope: {
            editing: '='
        },
        compile: function (tElem, tAttrs) {
            return function (scope) {
                scope.$watch('editing', function (newValue, oldValue) {
                    if (newValue !== oldValue) {
                        if (newValue) {
                            tElem.attr('summernote', '');
                            tElem.removeAttr('toggle-summer-note');
                            $compile(tElem)(scope);
                            scope.summernote = true;
                        } else {
                            if (scope.summernote) {
                                tElem.attr('toggle-summer-note', '');
                                tElem.removeAttr('summernote');
                                $compile(tElem)(scope);
                                scope.summernote = false;
                            }
                        }
                    }
                });

            }
        }
    }
});

Answer 1

您可以通过指令的编译步骤设置 $watch，然后在那里切换 summernote 属性，并在指令的元素上调用 $compile 到 link 您的 summernote 指令:

在你的指令定义中

...
compile: function(tElem, tAttrs) {
  return function(scope) {

    // this avoids looping/other side-effects
    tElem.removeAttr('some-directive', '');

    // editting would be the variable that toggles edit mode
    scope.$watch('editting', function(newValue, oldValue) {
      if (newValue !== oldValue) {
        console.log('editting changed', newValue, oldValue);
        if (newValue) {
          tElem.attr('summernote', '');  
        } else {
          tElem.removeAttr('summernote');
        }

        $compile(tElem)(scope);
      }
    });

  }
}

这是 plnkr 中的一个示例，我删除了第二个指令，这样您就可以知道它何时被 linking/getting 删除：

http://plnkr.co/edit/r3mt6h8EocYKfDDr2vkR?p=preview

AngularJS 有条件地添加指令

AngularJS conditionally add directive

javascript

angularjs

summernote