Question

这是配置文件config.js：

.state ('home', {
    url: '/home',
    templateUrl: 'views/common.html'
})
.state ('home.mypage', {
    url: '/mypage',
    templateUrl: 'views/mypage.html'
})

以下是common.html：

<header id="header" data-ng-include src="'views/template/header.html'"></header>
<section id="main">
    <aside id="leftside" data-ng-include src="'views/template/leftside.html'"></aside>
    <aside id="rightside" data-ng-include src="'views/template/rightside.html'" data-ng-controller="mypageCtrl"></aside>
    <section id="content" class="page-view" data-ui-view></section>
</section> 
<footer id="footer" data-ng-include src="'views/template/footer.html'"></footer>

rightside.html 包含api调用的输入和搜索按钮， mypage.html 包含类似<div class="container ng-scope" data-ng-controller="mypageCtrl">的内容。

当ajax成功时：

function (data) {
    $scope.results = data.results;
    $scope.pagination = data._meta.pagination;
}

当我请求 mypage 时，即使点击寻呼机，第一次显示结果也可以。但是，当我点击 rightside.html 中的搜索按钮时，即使ajax响应有结果，查看（mypage.html）也不会更新。

我错了什么？如何在模型发生变化时更新视图？

修改这是mypageController.js

materialAdmin
    .controller('mypageCtrl', function($location, $scope, mypageService) {
        $scope.search = function(conditions) {
            return (mypageService.search(conditions).then(
                function (data) {
                    $scope.results = data.results;
                    $scope.pagination = data._meta.pagination;
                },
                function (error) {
                    console.log(error);
                }
            ) );
        };
        $scope.search($scope.conditions); // Initial search when request page
})

和mypageService.js

materialAdmin.service("mypageService", ['$http', '$q', function($http, $q) {
    return {
        search: search
        // and more functions
    };

    function search(conditions) {
        return ( $http.post(
            BASE_URL + "/search", conditions).then(
            handleSuccess,
            function (response) {
                handleError(response, $q)
            }
        ) );
    }
}]);

Answer 1

试试这个：

function (data) {
    $scope.results = data.results;
    $scope.pagination = data._meta.pagination;
    updateScope();
}

function updateScope(){
    if(!$scope.$$phase){
        $scope.$apply();
    }
}

这确保在AJAX调用完成后运行$ scope apply循环，以便更新反映在DOM中。

Answer 2

mypageService中的搜索方法似乎没有返回承诺，但这正是您对控制器mypageCtrl的期望。因此，successcallback实际上没有执行。我建议更改此方法以返回这样的承诺：

function search(conditions) {
    return $http.post(BASE_URL + "/search", conditions);
}

Answer 3

根据您在问题中描述的内容，问题似乎是您有两个相同控制器的实例。一个是在这里创建的

.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span:before,
.mobile-nav-toggle:hover span:after,
.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
 background: rgba(0, 0, 0, 0.8); }

另一个是在 mypage.html 文件中创建的。

您在加载时看到了正确的行为，因为mypage.html上的控制器正在运行，因此信息被拉动并显示。

但是当您点击右侧中的按钮时，正在更新的控制器（或更准确的范围）是右侧的那个（没有数据显示），因此您仍然可以看到数据在mypage.html

在这种情况下解决您的问题非常简单。只需删除两个控制器声明，然后在公共页面的section元素中重新声明控制器。你会得到正确的行为。

模型更改时，AngularJS视图无法更新

3 个答案: