ng-repeat 不能作为参数传递答案

【问题标题】：ng-repeat can't be passed as parameterng-repeat 不能作为参数传递
【发布时间】：2016-04-11 20:19:04
【问题描述】：

我正在编写一个自定义指令。我在这方面做了很多例子，传递方法、对象、字符串等。但是现在我必须将 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>

这就是我在任何页面中使用指令的方式：

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

但是我总是得到错误：

collection中“item”形式的预期表达式[track by id]' 但得到了 'fRepeat'。

我尝试将其传递为： Javascript 文件中的fRepeat: '&' 或fRepeat: '=' 无论如何都没有用。是否可以将其作为字符串传递，或者根本不可能？

【问题讨论】：

fRepeat 值中' 的意义何在？ geRepeat 来自哪里？请注意ng-repeat 需要一个固定表达式，而{{fRepeat}} 在ng-Repeat 之后进行评估，所以这不起作用。
就像提到的 zeroflagL 一样，您的 ng-repeat 无法接收动态表达式。但是，我很确定您可以将 collection 作为参数传递，它应该可以工作。这对你来说是一个选择吗？
@zeroflagL 这是我编辑的重复。我已经尝试了所有情况，有和没有'。
@AdelaN，我一开始就是这么想的。但是集合的类型，要使用的集合的项目，以及行的布局总是会改变，所以我做不到。
一个简单的解决方案是使用template 函数而不是templateUrl。

标签： javascript html angularjs angularjs-directive angularjs-ng-repeat

【解决方案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>

与您的方法的主要区别：我在内存中使用模板，因此我可以在使用 Angular 编译它之前尽可能多地修改它（不要忘记添加 $compile 依赖项）。请注意，我不看 scope.fRepeat，我不希望它改变，因为 ng-repeat 表达式没有改变。

【讨论】：

【解决方案2】：

我已经尝试过了，正如您在帖子中所建议的那样，并且能够很好地完成它。由于您没有提到您的整个代码，所以我假设了一些内容并从您的帖子中提取了一些并将它们放在示例演示下。

请先参考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);
    }
  }
});

参考第二个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);
    }
  }
});

【讨论】：