javascript - 在另一个指令中使用 ui-tinymce 指令

Question

我正在尝试使用 ui-tinymce另一个指令内的指令:

angular.module("risevision.widget.common.font-setting", ["ui.tinymce"])
  .directive("fontSetting", ["$templateCache", function ($templateCache) {
    return {
      restrict: "AE",
      template: $templateCache.get("_angular/font-setting/font-setting.html"),
      transclude: false,
      link: function ($scope, element, attrs) {
        $scope.tinymceOptions = {
          menubar: false,
          statusbar: false
        };
      }
    };
  }]);

和_angular/font-setting/font-setting.html:

<div class="row">
  <div class="col-md-12">
    <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
  </div>
</div>

TinyMCE 编辑器出现，但它忽略了我在 $scope.tinymceOptions 中设置的配置选项。也就是说，菜单栏和状态栏仍然显示。

对于为什么它不起作用有什么想法吗？

谢谢。

Answer 1

我知道我参加聚会迟到了，但如果有人有同样的问题但找不到答案，我会回答你。

只有当tinymceOptions变量有数据时才需要加载TinyMce，因此您需要将其包装在ng-if中:

<div class="row">
  <div class="col-md-12" ng-if="tinymceOptions">
    <textarea ui-tinymce="$parent.tinymceOptions" ng-model="$parent.tinymceModel"></textarea>
  </div>
</div>

如果您使用 Angular >1.4，则可以避免使用 $parent(ng-if 内的元素有自己的作用域)，并在指令内使用 Controller :

app.directive('someDirective', function () {
  return {
    scope: {},
    bindToController: {
      someObject: '=',
      ...
    },
    controllerAs: 'ctrl',
    controller: function () {
      var ctrl = this;
      ctrl.message = 'Object loaded.';
    },
    template: '<div ng-if="ctrl.someObject">{{ctrl.message}}</div>'
  };
});