Javascript ng重复can'；不能作为参数传递

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

{{fund.title}

然而，我总是得到错误：

“集合中的项[跟踪方式]形式的预期表达式 id]“但得到了“fRepeat”

我已尝试将此作为：

---

fRepeat:'&'

或

fRepeat:'='

在任何情况下都可以在Javascript文件中使用，但没有任何用处。难道不可能将其作为字符串传递吗，或者根本不可能吗？

类似这样的东西怎么样

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

}

restrict:'E'，
替换：false，
范围：{
fRepeat:“@”，
fClick:“&”
},
是的，
链接：函数（范围、元素、属性、转置）{
变量模板=
''+
“
”+
“
”+
''      +  
“
”+
“
”+
'';
var trancludedContent=transclude（范围$parent）；
html（模板）；
var compiledContent=$compile（element.contents（））（范围）；
元素。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>

{{fund.title}

---

与您的方法的主要区别是：我在内存中使用了一个模板，因此在使用angular编译之前，我可以对其进行任意修改（不要忘记添加$compile依赖项）。请注意，我不看scope.fRepeat，我不希望它会随着ng repeat表达式的不变而改变。

我已经尝试过了，正如您在文章中所建议的，并且能够很好地得到它。因为你没有提到你的全部代码，所以我假设了一些东西，从你的帖子中选取了一些，并将它们放在示例演示下

请先参考

请查找以下代码：

HTML:

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

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

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

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

JS:

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

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

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

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

var-app=angular.module（'app'，[]）；
应用程序控制器（'测试'，功能（$范围）{
$scope.data=[{
“Id”：1，
“名称”：“一”
}, {
“Id”：2，
“姓名”：“两个”
}, {
“Id”：3，
“姓名”：“三”
}, {
“Id”：4，
“姓名”：“四”
}, ];
});
应用程序指令（'fList'，函数（）{
返回{
限制：'E'，
范围：{
fRepeat:“@”
},
模板：“Hello-{{singleItem.Id}
”，
链接：功能（范围、元素、属性）{
scope.singleItem=JSON.parse（scope.fRepeat）；
console.log（'sha'，scope.fRepeat）；
}
}
});

请参阅第二页

HTML:

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

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

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

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

JS:

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

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

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

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

var-app=angular.module（'app'，[]）；
应用程序控制器（'测试'，功能（$范围）{
$scope.data=[{
“Id”：1，
“名称”：“一”
}, {
“Id”：2，
“姓名”：“两个”
}, {
“Id”：3，
“姓名”：“三”
}, {
“Id”：4，
“姓名”：“四”
}, ];
});
应用程序指令（'fList'，函数（）{
返回{
限制：'E'，
范围：{
fRepeat:“=”
},
模板：“Hello-{{fRepeat.Id}
”，
链接：功能（范围、元素、属性）{
console.log（'sha'，scope.fRepeat）；
}
}
});

fRepeat值中的

“

有什么意义？

geRepeat

来自哪里？请注意，

ng repeat

需要一个固定的表达式，

{{fRepeat}}

在

ng repeat

之后求值，因此这无法工作。与前面提到的zeroflagL一样，您的ng repeat无法接收动态表达式。但是，我非常确定您可以将

集合作为参数传递，它应该可以工作。这是你的选择吗？@zeroflagL这是我编辑的fRepeat。我试过所有的案例，不管有没有
，
@AdelaN，这是我最初的想法。但是集合的类型、要使用的集合项以及行的布局总是会发生变化，所以我无法做到这一点。一个简单的解决方案是使用
模板
函数，而不是
模板URL
。