Question

我正在尝试构建一个“折叠”指令。 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>

RollDownDir.js：

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
    };
});

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

我必须完全删除内容DOM以获得性能（它适用于移动应用程序，内容很重要，如SVG等）。

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

0 个答案: