動態操作AngularJS中的DOM元素

我有要求使用AngularJS呈現我的數據庫中的所有帖子。我需要爲每個用戶可見的帖子提供編輯功能。目前，我正在通過使用'edit-post'指令來做到這一點。這是鏈接功能。動態操作AngularJS中的DOM元素

link: function ($scope, element, attrs) { 
      element.bind('click', function() { 
       var divId = $scope.$parent.post.meta.id + "Data"; 

       var html = $compile("<div class='editTextAreaDiv' id='" + divId + "'>" + 
          "<textarea class='editTextArea' id='editBox' rows='3' ng-model='editedPostText' name='editedPostText'>" + $scope.$parent.post.meta.data + "</textarea><br />" + 

          "<span class='pull-right'>" + 
           "<input class='btn' type='button' value='Save' ng-click='saveEditedPost(\"" + divId + "\")'/>" + 
           "<input class='btn' type='button' value='Cancel' ng-click='cancelEdit(\"" + divId + "\")'/>" + 
          "</span>" + 
         "</div>")($scope); 
       $("#" + divId).html(html); 
      }); 

}

我正在通過動態添加一個textarea和2個按鈕來操作DOM。

我的問題是這種動態操作DOM元素的方法在Angular世界中是否可取。或者我應該採取其他方法（如使用ng-show/ng-hide指令顯示/隱藏textarea和2個按鈕）。

注意：由於我不想爲每個帖子引入額外的textarea和2個按鈕，我寧願不要使用ng-show/ng-hide。

請指導我這一點。

來源

2013-12-09 Adarsh Konchady