javascript - 相同的参数传递到 HTML 但不是按钮

Question

我正在尝试在 angularjs 中传递一个参数。请注意下面的 {{dish.id}} 出现了两次，一次正确通过，另一次失败。

html 模板是

<ion-popover-view>
  <ion-content>
  <button class="button button-full button-light" ng-click="addFavorite({{dish.id}})">
        Add to favorites: dish {{dish.id}} 
  </button> 

  <button class="button button-full button-light" ng-click="addComment()">Add comment</button>    
  </ion-content>
</ion-popover-view>

Controller 中的功能是

    $scope.addFavorite = function (index) {
    console.log("added from DishDetail: index is " + index);
    favoriteFactory.addToFavorites(index);
    console.log("finished");
    }

但是，奇怪的是， View 中的两个 {{dish.id}} ，html 中的一个显示正确，而传递给函数的一个是“未定义”

有人可以帮我解决这个问题吗？有点被困在这里几天了，无法弄清楚自己。

谢谢!

Answer 1

摆脱 ng- 前缀的 html 属性中的插值，这些属性由 $scope.$apply() 方法处理

<button class="button button-full button-light" ng-click="addFavorite(dish.id)">