Unable to use ui-tinymce inside another directive

[donnapep]

ui-tinymce does not work when used inside of another directive. Given the following code:

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
        };
      }
    };
  }]);

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

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

The TinyMCE editor shows up, but the configuration options set in $scope.tinymceOptions are ignored. That is, the menu and status bars still show.

[deeg]

Can you please put this in a Plunker reproducing your issue>

My guess is this is related to #158. What if you put ng-if="tinymceOptions" on the text area?

[donnapep]

@deeg Adding ng-if="tinymceOptions" does resolve the problem, so looks like this is already covered by the other issue. Thx.

[fgodino]

Try to define the options on the pre-link function

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: {
        pre : function ($scope, element, attrs) {
            $scope.tinymceOptions = {
              menubar: false,
              statusbar: false
            };
        }
      }
    };
  }]);