Angular JS双向绑定不起作用答案

【问题标题】：Angular JS two-way-binding doesn't workAngular JS双向绑定不起作用
【发布时间】：2015-04-28 15:16:06
【问题描述】：

我无法在我的控制器中使用双向绑定。有一些奇怪的东西，但我不明白。我的数据结构是一个包含字符串数组的 javascript 对象。

$scope.schedule = {
    schedule_name: "Test 123",
    schedule_id: 1234,
    dates: [{
        date: "2015-01-01"
    }, {
        date: "2015-02-01"
    }, {...}]
}

我从我的数据库中检索时间表并将其放在 UI 中的列表中。 $scope.scheduleList 的元素是可点击的。如果用户点击一个 schedule 元素，那么它将在屏幕上显示 schedule 对象的所有属性。

我用ng-repeat="date in schedule.dates" 遍历日期数组，并像这样使用ng-model="date.date" 中的日期值。

我的问题是范围变量schedule 不会因任何更改而更新。这是我的代码的摘录：

$scope.scheduleList = [];
CommonDataService.get(URL).then(function(data) {
  for (var i = 0; i < data.length; i++) {
    data[i].dates.forEach(function(value, key) {
      data[i].dates[key] = {date: $filter("date")(value, "EEE, dd.MM.yyyy")};
    });
    data[i].schedule_name = data[i].schedule_name.substr(4);
  }
  $scope.scheduleList = data;
});

$scope.schedule = {};
$scope.showSchedules = function(schedule) {
    $scope.schedule = schedule;
}

...

$scope.save = function() {
  console.log($scope.schedules);
  //CommonDataService.add(URL, $scope.schedules).then(function(response) {
  //    console.log(response);
  //});
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body data-ng-app="rwk">
...
    <div class="form-group col-lg-6" data-ng-repeat="date in schedule.dates track by $index" data-ng-if="key !== 'schedule_id' && key !== 'schedule_name'">
      <div class="col-lg-9">
        <p class="input-group pull-left">
          <input data-rwk-datepicker data-format="D, dd.mm.yyyy" id="{{$index}}" type="text" class="form-control" data-ng-model="date.date" data-ng-required="true" />
        </p>
      </div>
    </div>
</body>

如果有人能帮助我，我很幸运！提前致谢！

【问题讨论】：

您在哪里应用ng-app，在body 或html 标记中？您似乎忘记了使用 ng-app 指令，因为它似乎是在逐字呈现您的 HTML 标签内容。当没有告知 Angular 管理 DOM 的哪个部分时，通常会出现这种情况。
范围变量可能会被更新，但除非您通知它，否则 Angular 可能不会接受它。如果您以 Angular 无法检测到的方式异步更新它，那么它不会知道也无法更新其他所有内容。查看$scope.$apply 和$timeout。难道是……？
您指的是哪些变化？日期或服务请求的 UI 更改？
$scope.schedules 和 $scope.scheduleList 有什么关系？从您的帖子中不清楚它们是如何链接的（或者它们是否应该是相同的）
@KarlAnderson ng-app 在 body 标签中声明。 @deceze 我已经尝试过$timeout，但它不起作用。 @charlietfl 如果用户在 UI 中更改日期，则应更新范围变量计划。 @JohnDrouhard $scope.schedule 是 $scope.scheduleList 的对象，当用户单击计划列表项时，该对象将传递给 $scope.schedule。请参阅上面的编辑说明。

标签： javascript angularjs html angularjs-ng-repeat angularjs-ng-model

【解决方案1】：

您可能会从 Angular 的范围之外调用 showSchedules() 函数。您需要通过将函数体包装在 $scope.$apply(...) 中来告诉 Angular 更新绑定：

$scope.schedule = {};
$scope.showSchedules = function(schedule) {
    $scope.$apply(
        $scope.schedule = schedule;
    );
}

您也可以将对 showSchedules 的调用封装在 $scope.$apply(...) 调用中。

【讨论】：

谢谢，我稍微修改了你的解决方案，它奏效了！