ng-repeat parametresi olarak iletilemiyor

Question

Özel bir yönergesi yazıyorum. Bu konuda çok fazla örnek yaptım, yöntemleri, objeleri, dizeleri, vs. geçirdim. Ama şimdi ng-yinelemenin içeriğini parametre olarak geçmek zorundayım ve bunu hiçbir şekilde iletemem. Ayrıntılar şu şekildedir: Direktifimin Javascript dosyası.

. Görüldüğü gibi, ng-tekrarının içeriğini dış alandan direktife taşıyan bir fRepeat vardır.

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

Benim özel yönergesinin düzen:

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

Ve her sayfadan yönergesini nasıl kullandığımız şudur:

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

: Hep hata alıyorum Ancak

<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> 

Bunu geçmeyi denedim Her durumda Javascript dosyasında fRepeat: '&' veya fRepeat: '=' ya da kullanımı yok. Onu bir ip gibi göstermek mümkün değil mi ya da hiç mümkün değil mi?

Answer 1

Böyle bir şeye ne dersiniz?

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

} 

çağrı gibi görünecektir için:

<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> 

senin yaklaşımla temel fark: öylesine i (açısal ile derlemeden önce ben istediğiniz kadar değişiklik yapabilirsiniz bellekte bir şablon kullanmak $ compile bağımlılığı eklemeyi unutmayın). Scope.fRepeat izlemediğimi unutmayın, ng-repeat ifadesinin değişmediğinden değişmesini beklemiyorum.

Answer 2

Gönderinizde iddia ettiğiniz gibi ve oldukça iyi bir şekilde başardım. Bütün kodunuzdan bahsetmediğiniz için, bir şeyleri kabul ettim ve yazılarınızdan bazılarını aldım ve bunları örnek demoların altına koydum.

1. Refer first demo .

bulabilirsiniz aşağıdaki kodu:

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