Question

已经花了几个小时对此进行了筛选，筛选了大量的帖子和博客，但似乎无法让我的模型更新。更具体地说，我正在尝试更新数组项（ng-repeat）。在下面的简单案例中，我迭代场地列表，并切换一个＆＃34;喜欢＆＃34;按钮，我适当地更新服务器，并反映$ scope上场地项目的变化。

在我的 search.html 中我有一个指令：

<ion-content>
   <venues-list venues="venues"></venues-list>
</ion-content>

和搜索控制器我有：

app.controller('bleh', function(Service) {
   ...
   $scope.venues = [{ id: 1, name: 'Venue1', like: false },{ id: 2, name: 'Venue2', like: false }];
   ...
});

那里没什么不寻常的。然后在我的场地列表指令中：

app.directive('venues-list', function() {

   function venueListController($scope, Service) {

      $scope.likeToggle = function(venue, $index) {
            Service.likeVenue(venue.id, !venue.like).then(function() {
               $scope.venues[$index].like= !venue.like;
            });
      }
   }

   return {
      strict: 'E',
      templateUrl: 'venue.html',
      controller: venueListController,
      scope: {
         venues: '='
      }
   }
});

然后在我的 venue.html 中我有：

<div ng-repeat="venue in venues">
  <p>{{venue.name}}</p>
  <button ng-click="likeToggle(venue, $index)">Like</button>
</div>

我尝试了很多不同的选择：

$scope.$apply() // after updating the $scope or updating scope within apply's callback function;
$scope.$digest()
$timeout(function() { // $scope.venues[$index] .... }, 0);
safe(s,f){(s.$$phase||s.$root.$$phase)?f():s.$apply(f);}

所以

safe($scope, function() { $scope.venues[$index].like = !venue.like });

我还没有使用指令中的链接，但我的venues.html模板显然比这里提供的更精细。

修改

只是为了保持讨论的相关性，也许我应该提到 - 数据从服务器返回没有问题，我正在处理错误，我肯定会在代码中更新$ scope的部分。注意：上面的代码是完整应用程序的一个小代表，但所有基本部分都在上面阐述。

搜索控制器
场地服务
场地列表指令和venue.html模板以及指令
指令控制器

编辑＃2

$scope.foo = function() {
   $scope.venues[0].like = !$scope.venues[0].like;
}

为了让它更简单，上面的工作并不起作用 - 所以真的，底线是我的数组中的项目没有反映更新......

编辑＃3

$scope.foo = function() {
   $scope.venues[0].like = !$scope.venues[0].like;
}

我道歉 - 只是重复我上面试图说的内容 - 上面是改变范围，但是，这些更改没有反映在视图上。

Answer 1

也许问题在于您的服务和承诺解决方案..您可以在其中放置console.log并查看承诺解析是否正常工作？或者你可以共享该代码位。还在哪里检查范围更新？在指令内或外面

Answer 2

好好经过一些重构后我终于开始工作了。

我的具体问题是“修复”（如果你想称之为）：

而不是传递场地数组，我在父控制器上迭代数组，传入一个场地作为元素属性，它将在指令的隔离范围内绑定（双向）。

所以，而不是：

<ion-content>
   <venues-list venues="venues"></venues-list>
</ion-content>

我现在有：

<ion-content>
   <venues-list ng-repeat="venue in venues" venue="venue"></venues-list>
</ion-content>

我的指令现在看起来像：

app.directive('venues-list', function() {

   function venueController($scope, Service) {

      $scope.likeToggle = function(venue) {
            Service.likeVenue(venue.id, !venue.like).then(function() {
               $scope.venue.like = !venue.like;
            });
      }
   }

   return {
      strict: 'E',
      templateUrl: 'venue.html',
      controller: venueController,
      scope: {
         venue: '='
      }
   }
});

这就是诀窍！

角度数组项未在范围更改

2 个答案: