TinyMCE不能在我的自定義指令中工作

Question

我有一個討論窗體。所以在我的表單中有一個新的評論和編輯評論選項。 對於編輯評論，我創建了一個自定義指令來動態顯示所有舊評論。

我在新評論textarea上實現了TinyMCE編輯器，它在那裏工作得很好。

但問題是，當我嘗試將TinyMCE編輯器添加到編輯註釋textarea然後它不在那裏工作。

這裏是我的discussion.html文件代碼

<div class="post-commnets" ng-controller="discussionCtrl"> 
      <div class="comment-box" data-ng-repeat="discussionComment in comment.userComments"> 
       <bh-edit-comment bh-group-alternate-id="groupAlternateId" bh-checkmember="{{checkMember}}" bh-current-user-id="{{currentUserEmail}}" bh-comment="discussionComment" bh-comment-text="{{discussionComment.content}}" bh-index="$index" bh-group-alternate-id="groupAlternateId" bh-display-edit="true" bh-text-box-css="'colonySetEdit'" bh-comment-css="'categorylabel'"></bh-edit--comment> 
       </div> 
      </div> 
     <form class="comment-form" name="newconversation"> 
       <div class="formRow"><textarea ui-tinymce="tinyMceOptions" data-ng-model="comment.commentText" ></textarea></div>              
     <div class="btn-box"> 
     <a class="btn btn-custom" href="#" data-ng-click="saveComment()">Publish</a> 
      </div> 
</form> 

的discussionCtrl我寫了下面的代碼內部： -

$scope.tinymceOptions = { 
    plugins: 'link image code', 
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code' 
    }; 

這裏是我的指令模板

<div class="row" > 
    <div class="col-md-11 forDrop"> 
     <div class="post_user"><a ng-href="/user/profile/view/{{comment.email_id}}"><img src=" 
     <a ng-href="">{{comment.firstname}} {{comment.name}}</a> 
     </div> 
      <div data-ng-if="comment.show" ><textarea id="focus{{comment.id}}" ng-class="{{textBoxCss}}" ng-class="edit-user-comment" ui-tinymce="tinymceOptions" data-ng-model="editComment.content"></textarea></div> 
     <p data-ng-hide="comment.show" ng-bind-html="comment.content"></p> 
     <p class="created-date">{{changeDateFormat(comment.created_at)}}</p> 
     </div> 
    <div class="col-md-1 actions" data-ng-if="checkmember==1 || currentUserId == comment.email_id"> 
     <a href="" class="done secondry" ng-class="{'done secondry':!displayEdit}" data-ng-mousedown="updateCommentContent(comment.id,comment.content)"></a> 
      <a href="" ng-attr-title="{{'Edit'}}" class="penEdit primery" data-ng-mousedown="clickToUpdateComment(comment.content)"></a> 
    </div> 
</div> 

這裏是我的自定義指令。

groupProfile.directive("bhEditComment", ["$rootScope", "$cookies", "$location", "$timeout", "groupFactory", "userFactory", function ($rootScope, $cookies, $location, $timeout, groupFactory, userFactory) { 
     var obj = { 
      restrict: 'E', 
      scope: { 
       'content': '@bhCommentText', 
       'comment': '=bhComment', 
       'checkmember': '@bhCheckmember', 
       'currentUserId': '@bhCurrentUserId', 
       'index': '=bhIndex', 
       'displayEdit': '=bhDisplayEdit', 
       'commentCss': '@bhcommentCss', 
       'textBoxCss': '@bhTextBoxCss', 
       groupAlternateId: '=bhGroupAlternateId', 
      }, 
      replace: true, 
      templateUrl: '/group/user/edit/comment/template', 
      link: function (scope, element, attrs) { 
       scope.editComment = { 
        content: scope.content 
       }; 
       var unbindWatcher = undefined; 
       scope.clickToUpdateComment = function (index) { 
       scope.tinyMCeInit(); 
        scope.comment.show = true; 
        unbindWatcher = scope.$watch('content', function (value) { 
         scope.editComment.content = value; 
        }); 

       }; 

       scope.tinyMCeInit = function() { 
        scope.tinymceOptions = { 
          plugins: 'link image code', 
          toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code' 
          }; 
       } 

       scope.updateCommentContent = function (commentId, commentText) { 
        var flag = 0; 
        var newCommentText = scope.editComment.content; 
        if (newCommentText !== undefined && newCommentText !== '') { 
         if (commentText !== newCommentText) { 
          if (typeof unbindWatcher === "function") { 
           unbindWatcher(); 
          } 

          groupFactory.editComment({ 
           content: newCommentText, 
           commentId: commentId, 
           groupAlternateId: scope.groupAlternateId 
          }).then(function (data) { 
           scope.comment.show = false; 
           scope.comment.content = newCommentText; 
          }, function (err) { 
           scope.comment.show = false; 
          }); 


         } else { 
          scope.comment.show = false; 
         } 
        } else { 
         scope.comment.show = false; 
         return; 
        } 
       }; 


       scope.changeDateFormat = function (commentDate) { 
        var date = new Date(commentDate); 
        var monthNames = ["January", "February", "March", "April", "May", "June", 
         "July", "August", "September", "October", "November", "December" 
        ]; 
        var month = monthNames[date.getMonth()]; 
        var day = date.getDate(); 
        var hours = date.getHours(); 
        var minutes = date.getMinutes(); 
        var ampm = hours >= 12 ? 'pm' : 'am'; 
        hours = hours % 12; 
        hours = hours ? hours : 12; // the hour '0' should be '12' 
        minutes = minutes < 10 ? '0' + minutes : minutes; 
        var strTime = hours + ':' + minutes + ' ' + ampm; 
        return day + ' ' + month + ' at ' + strTime; 
       } 
      } 
     } 
     return obj; 
    }]); 

如果我嘗試的指令之前添加文本區域，然後它的工作對我來說（在同一控制器的工作），但該指令內它不工作。

<div class="post-commnets" ng-controller="discussionCtrl"> 
      <div class="comment-box" data-ng-repeat="discussionComment in comment.userComments"> 
    <textarea ui-tinymce name="description" placeholder="What's on your mind?" data-ng-model="discussionComment.content"></textarea> 
       <bh-edit-comment bh-group-alternate-id="groupAlternateId" bh-checkmember="{{checkMember}}" bh-current-user-id="{{currentUserEmail}}" bh-comment="discussionComment" bh-comment-text="{{discussionComment.content}}" bh-index="$index" bh-group-alternate-id="groupAlternateId" bh-display-edit="true" bh-text-box-css="'colonySetEdit'" bh-comment-css="'categorylabel'"></bh-edit--comment> 
       </div> 
      </div> 
     <form class="comment-form" name="newconversation"> 
       <div class="formRow"><textarea ui-tinymce="tinyMceOptions" data-ng-model="comment.commentText" ></textarea></div>              
     <div class="btn-box"> 
     <a class="btn btn-custom" href="#" data-ng-click="saveComment()">Publish</a> 
      </div> 
</form> 

這裏是我的討論形式

任何想法的屏幕截圖？

Answer 1

這裏是TinyMCE的內部指令的工作片段： -

var app = angular.module("myApp", ['ui.tinymce']); 
 
app.controller("myCtrl", function($scope) { 
 
    
 
}); 
 

 
app.directive("bhEditComment", ["$rootScope", "$location", "$timeout", function($rootScope, $location, $timeout) { 
 
    var obj = { 
 
    restrict: 'E', 
 
    replace: true, 
 
    templateUrl: "foo.html", 
 
    link: function(scope, element, attrs) { 
 

 
    } 
 
    } 
 
    return obj; 
 
}]);

<!DOCTYPE html> 
 
<html> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.min.js"></script> 
 
<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tinymce/0.0.19/tinymce.min.js"></script> 
 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <bh-edit-comment></bh-edit-comment> 
 
    <script type="text/ng-template" id="foo.html"> 
 
     <textarea ui-tinymce ng-model="demo.tinymce"></textarea> 
 
    </script> 
 
    </div>