Question

我正在尝试在我的Angular应用程序中使用Angular-UI TinyMCE指令。

发生的是，我查询端点，它返回一个对象数组。我有一个函数，然后将其转换为带有HTML标记的长字符串。然后该数据设置为$scope.tinymceModel

一切正常。我可以console.log($scope.tinymceModel)及其正确的数据。

问题是在返回端点查询后需要运行HTML解析函数。所以我在.success()回调中调用了函数。出于某种原因，当我在回调中设置$scope.tinymceModel时，TinyMCE指令忽略它。即使我将它设为$scope.tinymceModel = 'test'，但如果我将$scope.tinymceModel = 'test'放在回调之外，它就会显示出来。

这告诉我，由于某些原因加载TinyMCE指令时，需要tinymceModel已填充数据。我不确定我是怎么解决这个问题的。

这也告诉我在此之后我可能还有其他问题。 TinyMCE的下一个任务是用户可以编辑文本，单击一个按钮，应用程序将在tinymceModel内发送包含更新信息的POST。如果这是一个常规文本框，由于数据的原因，它很简单捆绑。然而，似乎TinyMCE在数据绑定方面表现不佳。

有什么想法吗？

Answer 1

我试图重新创建你所描述的内容（用$ timeout代替$ http）无济于事。这是我的解决方案，似乎工作得很好。

HTML：

<div ng-controller="MainCtrl">
  <textarea ui-tinymce="" class="form-control" ng-model="someHtml"></textarea>
</div>

JavaScript的：

angular.module('testTinymceApp')
  .controller('MainCtrl', function ($scope, $timeout) {
    $timeout(function() {
      $scope.someHtml = '<h1>HELLO THERE</h1>'
    }, 7000);

    // This does the same thing with an XHR request instead of timeout
    // $http.get('/some/data/').success(function(result) {
    //   $scope.someHtml = '<h1>HELLO THERE</h1>'
    // });
  });

我想也许你可以与自己的应用程序进行比较？我知道这可以用于XHR请求。我在工作中使用我认为是相同的工作流程来构建CMS。

此代码段中的someHtml属性也将是有效的HTML，因此在POST请求中将其发回应该非常容易。

如果这还不够，请提供进一步说明。

Answer 2

想出来了！这个问题与TinyMCE指令中的错误有关。默认情况下，没有设置优先级。将其设置为值1或更高可以修复它。似乎Ui-TinyMCE指令的当前版本已经修复了这个版本，但是我在不到一个月前推出的版本并没有修复它。

坚持使用Angular-UI TinyMce

2 个答案: