角度指令ngRepeat内のトランジション

Question

ng-repeat指令内でのトランジションに問題があります。 Angularはテンプレート内で.transclude要素を見つけられないため、置換は行われません。これは、ng-repeatがトランジション時までにトランスクリプトを削除するという事実によって引き起こされると私は信じています。 ng-repeatの前に置き換えてプレースホルダに手を差し伸べる方法や、他の方法でこの問題を解決する方法を知りたいと思います。

追記：私は代わりに、NG-transcludeディレクティブを使用すると、コードが期待通りに動作し であるが、その後、私は値にアクセスするために$親 {{$のparent.item.nameを}}使用する必要があり、I好きではない。ここで

は、私のコードの縮小さバージョンです：

HTML

<div mydir="items"> 
    {{item.name}} 
</div> 

template.html

<div ng-repeat="item in items"> 
    <div class="transclude"></div> 
</div> 

ディレクティブ

app.directive("mydir" , function(){ 
    return { 
     templateUrl : "template.html", 
     transclude : true, 
     scope : { 
      items: "=mydir" 
     }, 
     link : function($scope , $element , attrs , $ctrl , $transclude){ 
      $transclude(function($content){ 
       $element.find(".transclude").replaceWith($content); 
      }); 
     }, 
    }; 
}) 

予想結果の前にここで

<div mydir="items"> 
    <div ng-repeat="item in items"> 
     {{item.name}} 
    </div> 
</div> 

Answer 1

をコンパイルし、私はあなたが行くどこを取得すると思います一つの選択肢です。基本的には、htmlディレクティブ{{ item.name }}の内容を取得し、ディレクティブのコンパイル関数内で動的テンプレートを作成します。

var app = angular.module('plunker', []); 

app.directive("mydir" , ['$compile', '$templateRequest', function($compile, $templateRequest){ 
    return { 
     scope : { 
      items: "=mydir" 
     }, 
     compile: function($element) { 
      var transclude = $element.html(); 
      $element.html(''); 
      return function(scope, elem) { 
       $templateRequest("template.html").then(function(html){ 
        var tpl = angular.element(html); 
        tpl.children('.transclude').append(transclude); 
        $compile(tpl)(scope); 
        elem.append(tpl); 
       }); 
      }; 
     } 
    }; 
}]); 

app.controller('MainCtrl', function($scope) { 
    $scope.items = [{ 
    name: "Item 1" 
    },{ 
    name: "Item 2" 
    }] 
}); 

ここにはdemoがあります。