Question

我使用summernote编辑器作为一个指导版本，作为一个指令，从这里开始：https://github.com/summernote/angular-summernote

这样做时：

<summernote config='options'></summernote>
....
controllerfn = function() {
    var vm = this;
    vm.options = {
        height: 300
    }
}

一切都很好。

在指令中使用此方法时，它不会：

angular
    .module('common')
        .directive('textArea', textAreaFn);

textAreaFn.$inject = [ '$compile' ];

function textAreaFn($compile) {
    return {
        require: "?ngModel",
        scope: { 
        },
        template: "<summernote config='options'></summernote>",
        link: function(scope, element, attrs, ngModel) {
            scope.options = {
                height: 300
            };
          $compile(element.contents())(scope)


        }
    };
}

有人知道为什么这不起作用吗？以及如何解决？非常感谢！

Answer 1

它略微隐藏在角度文档中，但有一个前后链接功能的概念。 https://docs.angularjs.org/api/ng/service/$compile#pre-linking-function

预链接功能中的代码将在链接任何子元素之前执行。

angular
    .module('common')
        .directive('textArea', textAreaFn);

textAreaFn.$inject = [ '$compile' ];

function textAreaFn($compile) {
    return {
        require: "?ngModel",
        scope: {
        },
        template: "<summernote config='options'></summernote>",
        link: {
          pre: function(scope, element, attrs, ngModel) {
            scope.options = {
                height: 300
            };
          },
          post: function(scope, element, attrs, ngModel) {
            // code you want to run after all child elements have been linked
          }
        }
    };
}

模板内的Angular指令，HOWTO接收参数（summerNote编辑器）

1 个答案: