Question

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

例如，这是表单标题，当编辑为true时应该将summernote初始化，当编辑为false时将其销毁。

<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以链接您的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中的一个示例，我删除了第二个指令，以便您可以判断它何时被链接/删除：

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

AngularJS有条件地添加指令

1 个答案: