Question

在HTML中：

<ul class="list-group">
   <li ng-repeat="item in simpleListVM.datasource track by $index" class="list-group-item">
      <simple-list-items listitem="item" listitemid="{{item.data.name + $index + 1}}"></simple-list-items>
   </li>
</ul>

指令：

scope: {
    listitem: '=',               
    listitemid:'&'                   
}

当我运行应用程序时，它显示错误。

语法错误：表达式[{{item.data.name + $ index + 1}}]第2列的令牌'{'无效键，从[{item.data.name + $ index + 1}}开始]

Answer 1

这是因为您提供的listitemid是一个插值表达式，应该是listitemid: '&'定义的函数。

对我而言，您似乎想要将listitemid: '&'更改为listitemid: '@'。这将绑定到表达式的结果。

Answer 2

Stephen J Barker是对的，请查看我的示例代码，

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>

<body ng-controller="MainCtrl">
  <ul class="list-group">
    <li ng-repeat="item in simpleListVM.datasource track by $index" class="list-group-item">
      <simple-list-items listitem="item" listitemid="{{item.name + $index + 1}}"></simple-list-items>
    </li>
  </ul>
</body>
<script>
  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope) {

    $scope.simpleListVM = {};
    $scope.simpleListVM.datasource = [{
      'name': 'test1'
    }, {
      'name': 'test2'
    }, {
      'name': 'test1'
    }];

  }).directive("simpleListItems", function() {
    var dir = {};
    dir.scope = {
      listitem: '=',
      listitemid: '@'
    };
    dir.link = function(s, e, a) {
      console.log("listitem", s.listitem);
      console.log("listitemid", s.listitemid);
    }
    return dir;
  });
</script>

</html>

将绑定项目和表达式组合在角度js中

2 个答案: