Question

我创建了一个简单的指令，其行为类似于可折叠面板。

该指令的内容我们添加了项目模板，该模板将成为ng-repeat模板的面板。一切正常，访问每个数据源项，但不是当模板本身也有ng-repeat时。

这是一个演示：http://plnkr.co/edit/7mhlO3GJTmFpyF1wrVYg

你可以看到即使是静态数据子ng-repeat也没有正确编译。

这是指令：

  app.directive('collapsible', ['$compile', function($compile) {
    return {
      restrict: 'A',
      scope: {
        srcData: "=ngModel"
      },
      link: function($scope, $element){

        // Extract the item template from the directive content
        var children = $element.children();

        // Wrap the item template with the repeater
        var template = angular.element('<div ng-repeat="item in srcData"></div>');
        template.append(children);

        var cfn = $compile(template);   // compile
        cfn($scope);                    // attach the scope
        $element.html(template);        // add it back to the directive content

        $element.on('click', 'h3 .button', function(e){
          e.stopPropagation();

          var $this = $(this);
          if($this.hasClass('close')){
              $scope.srcData.splice($this.scope().$index, 1);
              $scope.$apply();
          }
        });

        $element.on('click', 'h3', function(e){
          e.stopPropagation()

          var $this = $(this);
            $(this).next('div').toggle();
        });

      }
    };

  }]);

Answer 1

AH！知道了！

所以问题不在于嵌套的ng-repeat，而在于指令中的模板概念。

我需要用<script type="text/ng-template">来包装模板，只是为了告诉角度暂时不管它。

这里的指令代码正在运行：

  app.directive('collapsible', ['$compile', function($compile) {
    return {
      restrict: 'A',
      scope: {
        srcData: "=ngModel"
      },
      link: function($scope, $element){

        // Extract the item template from the directive content
        var children = $element.find('script').html();

        // Wrap the item template with the repeater
        var template = $('<div ng-repeat="item in srcData"></div>');
        template.append(children);

        var cfn = $compile(template);   // compile
        cfn($scope);                    // attach the scope
        $element.html(template);        // add it back to the directive content

        $element.on('click', 'h3 .button', function(e){
          e.stopPropagation();

          var $this = $(this);
          if($this.hasClass('close')){
              $scope.srcData.splice($this.scope().$index, 1);
              $scope.$apply();
          }
        });

        $element.on('click', 'h3', function(e){
          e.stopPropagation()

          var $this = $(this);
            $(this).next('div').toggle();
        });

      }
    };

  }]);

AngularJS：$ compile with nested ng-repeat

1 个答案: