使用 ng-repeat 设置 $scope 值时遇到问题 - 值未更新

Question

我似乎在用ng-repeat 设置$scope 值时遇到了一些麻烦

这是我的控制器中的 $scope 变量

    $scope.selectedDate = "25.04.2014";
    $scope.availableDates = [
{"date":"25.04.2014","day":"Fri", "hasDiscount":false},
{"date":"26.04.2014","day":"Sat", "hasDiscount":false},
{"date":"27.04.2014","day":"Sun", "hasDiscount":false},
{"date":"28.04.2014","day":"Mon", "hasDiscount":false}
];

这是我的 HTML 视图中的重复：

<div class="col-xs-2 no-padding" data-ng-repeat="days in availableDates">
    <div
        class="square-but"
        data-ng-click="selectedDate = days.date"
        data-ng-class="{ 'date-choice-selected': selectedDate === days.date }">
        <span>{{ days.day }}</span>
        <span>{{ days.date.substring(0, days.date.length - 5) }}</span>
        <div class="discount" data-ng-show="days.hasDiscount"></div>
    </div>
</div>

这会输出必要的信息，但是当我单击不同的 div 时，我注意到 date-choice-selected 类是由 ng-class 添加的，但在先前选择的 div/date 上并未取消选择。原因是 $scope.selectedDate 似乎没有被 ng-click 更新，当我尝试使用 {{ selectedDate }} 将其输出到界面时，该值不会改变，它始终保持为 25.04.2014 ！我在这个项目上也有一个$watch，如下所示：

$scope.$watch('selectedDate', function () {
    console.log('selectedDate Change');
    $scope.someHttpThing();
});

但是当点击子 Div 时，这个$watch 永远不会被触发/调用。我究竟做错了什么？ ng-repeat 是否引入了新的 $scope？我需要$broadcast / $emit 吗？

提前致谢。

Answer 1

由于ngRepeat 创建自己的范围，您应该在HTML 中使用$parent.selectedDate 而不是selectedDate。

来自ngRepeat docs（强调我的）

ngRepeat 指令为集合中的每个项目实例化一次模板。每个模板实例都有自己的范围。

代码

<div class="col-xs-2 no-padding" data-ng-repeat="days in availableDates">
    <div
        class="square-but"
        data-ng-click="$parent.selectedDate = days.date"
        data-ng-class="{ 'date-choice-selected': $parent.selectedDate === days.date }">
        <span>{{ days.day }}</span>
        <span>{{ days.date.substring(0, days.date.length - 5) }}</span>
        <div class="discount" data-ng-show="days.hasDiscount"></div>
    </div>
</div>

DEMO