Angular在作用域中改变对象不会改变视图

Angular changing object in scope doesn't change view

本文关键字：改变 视图 对象 Angular 作用域      更新时间：2023-09-26

截屏: 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次(不知道为什么会发生这种情况)。

您正在使用$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。

相关文章：