ng-repeat不能作为参数传递

ng-repeat can't be passed as parameter

本文关键字：参数传递 不能 ng-repeat      更新时间：2024-04-29

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

但是我总是收到错误：

">集合中的项目[跟踪方式"形式的预期表达式 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);
}

调用将如下所示： 

<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表达式不会改变。

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

  1. 请参阅第一个演示。

请在下面找到代码：

.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);
    }
  }
});
  1. 请参阅第二个演示。

.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);
    }
  }
});
相关文章：