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中设置的配置选项。也就是说，菜单栏和状态栏仍然显示。

关于它为什么不起作用的任何想法？

THX。

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＆gt; 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>'
  };
});

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

1 个答案: