ng-repeatはパラメータとして渡すことができません。

Question

私はカスタムディレクティブを作成しています。メソッド、オブジェクト、文字列などを渡して、これについてかなり多くの例を行ってきましたが、今ではng-repeatのコンテンツをパラメータとして渡す必要があります。詳細は次のとおりです。

私の指示のJavascriptファイル。このように、それにはfRepeatがあり、これはng-repeatの内容を外側のスコープからディレクティブに渡します。

return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     fRepeat: '@', 
     fClick: '&' 
    }, 
    transclude: true, 
    templateUrl: '/directives/f-list_jsp' 
}; 

マイカスタムディレクティブのレイアウト：

<div class="dataTable"> 
    <ul class="list-unstyled"> 
     <li ng-repeat="{{fRepeat}}" ng-click="fClick"> 
      <div ng-transclude></div>   
     </li> 
    </ul> 
</div> 

そして、私は任意のページからディレクティブを使用する方法、これは次のとおりです。

Expected expression in form of 'item in collection[ track by id]' but got 'fRepeat'.

：私は常にエラーを取得するしかし

<f-list f-repeat="fund in funds track by $index" f-click="fCtrl.showDetails($index)"> 
    <i class="fa fa-top fColor{{fund.risk}}"></i> {{fund.title}} 
</f-list> 

私はthiを通過しようとしましたどんな場合でもJavascriptファイルに fRepeat: '&'またはfRepeat: '='として表示されますが、使用されません。それを文字列として渡すことはできないのでしょうか、それはまったく可能ではありませんか？

Answer 1

このようなものはどうですか？

restrict: 'E', 
replace: false, 
scope: { 
    fRepeat: '@', 
    fClick: '&' 
}, 
transclude: true, 
link : function(scope, element, attrs, transclude){ 
    var template = 
'<div class="dataTable">'+ 
    '<ul class="list-unstyled">'+ 
     '<li ng-repeat="'+scope.fRepeat+'" ng-click="fClick">'+ 
      '<div class="f-list-transclude"></div>'  + 
     '</li>'+ 
    '</ul>'+ 
'</div>'; 
    var trancludedContent = transclude(scope.$parent); 
    element.html(template); 
    var compiledContent = $compile(element.contents())(scope); 
    element.find('f-list-transclude').append(transcludedContent); 

} 

呼び出しは次のようになりますと：

<f-list f-repeat="{{'fund in funds track by $index'}}" f-click="fCtrl.showDetails($index)"> 
    <i class="fa fa-top fColor{{fund.risk}}"></i> {{fund.title}} 
</f-list> 

あなたのアプローチとの主な違い：私はので、私は（角度でそれをコンパイルする前に、私が好きなだけそれを修正することができ、メモリ内のテンプレートを使用します$ compile dependencyを追加することを忘れないでください）。スコープを見るのではないことに注意してください.freepeat、ng-repeat式が変更されないので、変更するとは思いません。

Answer 2

私はあなたの投稿に納得して、とてもうまくいくように努力しました。コード全体を言及していないので、私は何かを仮定して、あなたのポストからいくつかを取り出し、サンプルデモの下に置いた。

1. Refer first demo .

見つけてください以下のコード：

HTML：

<div ng-app="app" ng-controller="test"> 
    <div ng-repeat="item in data"> 
    <f-list f-repeat="{{item}}"></f-list> 
    </div> 
</div> 

JS：

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

app.controller('test', function($scope) { 
    $scope.data = [{ 
    "Id": 1, 
    "Name": "One" 
    }, { 
    "Id": 2, 
    "Name": "Two" 
    }, { 
    "Id": 3, 
    "Name": "Three" 
    }, { 
    "Id": 4, 
    "Name": "Four" 
    }, ]; 
}); 

app.directive('fList', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     fRepeat: '@' 
    }, 
    template: "<p>Hello - {{singleItem.Id}} </p>", 
    link: function(scope, ele, attr) { 
     scope.singleItem = JSON.parse(scope.fRepeat); 
     console.log('sha', scope.fRepeat); 
    } 
    } 
}); 

2. Refer second demo .

HTML：

<div ng-app="app" ng-controller="test"> 
    <div ng-repeat="item in data"> 
    <f-list f-repeat="item"></f-list> 
    </div> 
</div> 

JS：

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

app.controller('test', function($scope) { 
    $scope.data = [{ 
    "Id": 1, 
    "Name": "One" 
    }, { 
    "Id": 2, 
    "Name": "Two" 
    }, { 
    "Id": 3, 
    "Name": "Three" 
    }, { 
    "Id": 4, 
    "Name": "Four" 
    }, ]; 
}); 

app.directive('fList', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     fRepeat: '=' 
    }, 
    template: "<p>Hello - {{fRepeat.Id}} </p>", 
    link: function(scope, ele, attr) { 
     console.log('sha', scope.fRepeat); 
    } 
    } 
});