角变化的对象不改变视图

截屏：http://screencast-o-matic.com/watch/cDjX00isoo
所有的JavaScript：http://fontget.com/js/all.js（底部）
演示的问题：http://www.fontget.com 角变化的对象不改变视图

所以我有这个问题我一直在处理一点，似乎无法弄清楚。我试图给用户通过点击带有特定过滤器的单选按钮来排序数据库结果的选项。

当我单击单选按钮时，我可以在控制台中看到使用AJAX获取了正确的url，但列表没有在视图中更新。

该页面首次加载时无效（无排序过滤器）。

控制器：

FontGet.controller('mainController', ['$scope', 'FontService', '$location', '$rootScope', '$routeParams', function($scope, FontService, $location, $rootScope, $routeParams) { 
    $rootScope.hideFatMenu = false; 
    $scope.navCollapsed = true; 
    $scope.isSettingsCollapsed = true; 
    $rootScope.header = "Welcome to FontGet.com!"; 
    $scope.sortBy = 'new'; 

    $scope.fonts = { 
     total: 0, 
     per_page: 10, 
     current_page: ((typeof($routeParams.page) !== 'undefined') ? $routeParams.page : 1), 
     loading: true 
    }; 

    $scope.setPage = function() { 
     FontService.call('fonts', { page: $scope.fonts.current_page, sort: $scope.sortBy }).then(function(data) { 
      $scope.fonts = data.data; 
      $scope.fonts.loading = false; 

      document.body.scrollTop = document.documentElement.scrollTop = 0; 
     }); 
    }; 


    $scope.$watch("sortBy", function(value) { 
     $scope.setPage(); 
    }); 

    $scope.$watch("searchQuery", function(value) { 
     if (value) { 
      $location.path("/search/" + value); 
     } 
    }); 


    $scope.categories = FontService.categories(); 
    $scope.setPage(); 
}]);

的观点：

<div class="fontdd" ng-repeat="font in fonts.data" > 
    <!-- Stuff goes here. This is populated correctly when page initially loads --> 
</div>

的排序按钮：

<ul class="radiobtns"> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-1" id="rc1" name="rc1" ng-model="sorts" ng-change="sortBy = 'popular'"> 
      <label for="rc1" >Popularity</label> 
     </div> 
    </li> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-2" id="rc2" name="rc1" ng-model="sorts" ng-change="sortBy = 'trending'"> 
      <label for="rc2">Trending</label> 
     </div> 
    </li> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-4" id="rc4" name="rc1" checked="checked" ng-model="sorts" ng-change="sortBy = 'new'"> 
      <label for="rc4">Newest</label> 
     </div> 
    </li> 
    <li> 
     <div class="radio-btn"> 
      <input type="radio" value="value-3" id="rc3" name="rc1" ng-model="sorts" ng-change="sortBy = 'alphabetical'"> 
      <label for="rc3">Alphabetical</label> 
     </div> 
    </li> 
</ul>

呦你会注意到单选按钮的ng-model没有设置为sortBy。原因是，如果我将它设置为sortBy，AJAX调用将进行4次（不知道为什么会发生这种情况）。

来源

2016-08-11 Meisam Mulla

对于部分问题的快速回答，无论何时使用'scope。$ watch'，它都会比您预期的更频繁地被解雇。为了过滤掉真正需要的监视事件，在监视函数中添加如下内容：'if（newVal == null || newVal === oldVal）return;' –

@ Dr.Cool'data.data' contains正确的数据。 'setPage'在初始页面加载时工作得很好。通过单击单选按钮，任何时候数据改变都不会改变视图。 –

@MeisamMulla，如果你能提供一个能够重现问题的演示，会更好。顺便说一下，你为什么不创建一个'objects'的数组来显示这些单选按钮（使用'ngRepeat'）并简化事物？ – developer033

您正在使用$scope.$watch函数来监视sortBy范围变量的更改。你应该尝试取下手表和更改排序按钮ng-change事件给这个：

<div class="radio-btn"> 
     <input type="radio" value="value-1" id="rc1" name="rc1" ng-model="sorts" ng-change="Sort('popular')"> 
     <label for="rc1" >Popularity</label> 
    </div>

在你的控制器中，创建一个Sort()功能：

$scope.Sort = function(sortBy) { 
    $scope.sortBy = sortBy; 
    $scope.setPage(); 
}

你并不真的需要使用$watch当你可以调用一个函数并传递适当的信息。

来源

2016-08-11 23:09:47

它仍然在做同样的事情。内容从我在控制台中可以看到的正确加载，'$ scope.fonts'也被更新，但视图不会更新。 –

@ Dr.Cool，好吧，我同意使用'ngChange'比使用'$ watch'更好，但它在** **这种情况下绝对没有改变。 – developer033

@ developer033完整的JavaScript位于http://fontget.com/js/all.js（位于底部），网站位于http://fontget.com –

角变化的对象不改变视图

回答

相关问题