在 Angular js 中结合绑定项和表达式答案

【问题标题】：combine binded item and expression in angular js在 Angular js 中结合绑定项和表达式
【发布时间】：2017-07-03 14:47:58
【问题描述】：

在 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}} 开始的表达式 [{{item.data.name +$index + 1}}] 的第 2 列中的标记“{”无效键].

【问题讨论】：

是错误指向的那一行吗？但它在错误中有一个数组，但在问题中没有？
请创建一个包含您所面临问题的演示，这将有助于您轻松理解问题。
是 simpleListVM.datasource 是数组

标签： javascript html angularjs angular

【解决方案1】：

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

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

【讨论】：

没问题@user2323308。很高兴为您提供帮助

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

【讨论】：