Angular-UI TinyMce로 붙임

Question

각도 응용 프로그램에서 Angular-UI TinyMCE 지시문을 사용하려고합니다.

어떻게됩니까, 끝점을 쿼리하면 개체 배열을 반환합니다. 그런 다음 HTML 태그가있는 긴 문자열로 변환하는 함수가 있습니다. 그런 다음 데이터가 $scope.tinymceModel

으로 설정됩니다.이 모든 것이 정상적으로 작동합니다. 나는 console.log($scope.tinymceModel)과 그 적절한 데이터를 할 수있다.

문제점은 HTML 구문 분석 기능이 엔드 포인트 조회가 리턴 된 후에 실행해야한다는 점입니다. 그래서 .success() 콜백 함수를 호출했습니다. 어떤 이유 때문에 내가 콜백 안에 $scope.tinymceModel을 설정할 때, TinyMCE 지시자는 그것을 무시합니다. 비록 내가 그것을 $scope.tinymceModel = 'test'이라도 만들지 만 콜백 외부에 $scope.tinymceModel = 'test'을 배치하면 그것은 단지 잘게 뭉게 나타나게됩니다.

이것은 TinyMCE 지시어가로드 된 어떤 이유로 인해 데이터가 이미 채워질 tinymceModel이 필요하다는 것을 알려줍니다. 나는 이것에 대해 어떻게 생각하는지 모르겠습니다.

이 또한 다른 문제가있을 수 있음을 알려줍니다. TinyMCE의 다음 작업은 사용자가 텍스트를 편집하고 버튼을 클릭하면 앱이 업데이트 된 정보가 포함 된 POST를 보내 게됩니다. tinymceModel 일반 텍스트 상자이면 데이터 바인딩 때문에 간단 해집니다. 그러나 그것은 TinyMCE가 데이터 바인딩과 잘 작동하지 않는 것처럼 보입니다.

아이디어가 있으십니까?

Answer 1

이 문제는 TinyMCE 지침의 버그와 관련이 있습니다. 기본적으로 우선 순위 설정은 없습니다. 값을 1 이상으로 설정하면 수정됩니다. Ui-TinyMCE 지침의 현재 버전이이 문제를 해결 한 것으로 보입니다. 그러나 한 달 전에 사용하지 않은 버전은 수정되지 않았습니다.

Answer 2

설명하는 내용을 다시 작성하려고했습니다. $ http를 $ timeout으로 대체하면 아무런 효과가 없습니다. 여기에 내 솔루션이 있는데 그것은 잘 작동하는 것 같습니다.

HTML :

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

자바 스크립트 : 난 당신이 자신의 응용 프로그램과 비교할 수 어쩌면 생각

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 요청으로 다시 보내면 매우 쉽습니다.

충분하지 않은 경우 추가 설명을하십시오.