AngularJS视图不能更新

这是配置文件config.js：AngularJS视图不能更新

.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">。

当阿贾克斯成功：

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

当我要求我的空间和第一次出现的结果是寻呼机点击即使确定。但是当我单击rightside.html中的搜索按钮时，即使ajax响应也会导致view（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) 
      } 
     )); 
    } 
}]);

来源

2015-10-05 Zeyar Phyo Maung

你在用什么'$ http'或'$ .ajax'？ – Satpal

我使用'$ http'。 –

从你在你的问题描述一下，问题似乎是，你在同一个控制器的两个实例。一是这里

<aside id="rightside" data-ng-include src="'views/template/rightside.html'" data-ng-controller="mypageCtrl"></aside>

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

由于mypage.html上的控制器正在工作并且信息正在被拉取和显示，因此您在加载时看到了正确的行为。

但是当你点击按钮时，更新的控制器（或更精确地说是作用域）就是右侧的控件（没有数据显示），所以你仍然可以看到mypage.html中的数据

在这种情况下解决您的问题相当简单。只需删除两个控制器声明并在通用页面的section元素中重新声明您的控制器。你会得到正确的行为。

来源

2015-10-06 05:48:14

这是工作:)谢谢@卡洛斯G. –

很高兴它帮助。如果你发现它有用，你能否给出答案upvote？ –

我不能投票，因为我的声望不够： –

试试这个：

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

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

这可以确保在$范围应用周期AJA后运行X调用已完成，以便更新反映在DOM中。

来源

2015-10-05 12:33:55 jsNovice

'if'条件总是'false'且静止视图没有改变。 –

是的，这不是简单的执行。这只是角度更新周期不运行时的后备案例。有了它，它始终是完全保护的，但Angular处理它，它也会在视图中更新。如果它仍然不起作用，你能否公开一些更多的代码。这对我们俩都会有很大的帮助。 – jsNovice

它看起来像你的搜索方法mypageService没有返回一个承诺，但这是你期望在你的控制器mypageCtrl。因此，successcallback实际上并未执行。我建议改变这个方法返回一个承诺是这样的：

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

来源

2015-10-06 05:14:06

AngularJS视图不能更新

回答

相关问题