Javascript 使用element.append添加DOM时的AngularJS绑定

我正试图建立一个“折叠”指令。 HTML总是有一个标题和一些内容。标题应始终显示，当您按下标题时，内容也将显示

内容也将绑定到视图控制器

Controller.js：

app.controller('MyController', function(...) {
     $scope.my_variable = "HELLO WORLD";
});

HTML:

<div roll-down>
        <div id="open-on" class="title">
           MY TITLE
        </div>

      <div class="content">
          {{my_variable}}    <--- controller, not directive. 
      </div>
</div>

现在这很好，但是控制器“my_variable”中的绑定永远不会被编译。那么它将只是空的？我怎样才能克服这个问题

---

为了提高性能，我必须完全删除内容DOM（它用于移动应用程序，内容很重，如SVG等）

这可能会有帮助。

不，不幸的是，这对我没有帮助。^。。关键是指令对内容一无所知。它只是确保删除它，并能够在以后再次添加内容。首先编译，然后追加。此外，该指令看起来像ng if…@PetrAveryanov，但如何从该指令控制ng if？

app.directive('rollDown', function(...) {
    var linkFn;
    linkFn = function(scope, element, attrs) {

      var title     = element[0].querySelector('.title');
      var content   = element[0].querySelector('.content');

      var content_buffer = angular.copy(content);
      content.remove();

      var addContent = function(){
          element.append(content_buffer); 
          $compile(content_buffer)(scope);
      }

      angular.element(element).on('click', function (evt) {
        addContent(); 

        $ionicScrollDelegate.resize();
        $rootScope.$apply();
        scope.$apply();
      });
    };

    return {
        restrict: 'AEC',
        link: linkFn
    };
});