如何angularjs阿贾克斯成功后更改UI视图 [英] How to change the ui-view after ajax success in angularjs

问题描述

现在我想火寻找一个AJAX。之后我的$ HTTP（可能是$国土资源只是AJAX）的成功，我需要更新index.page用户界面视图显示结果。这里是我的code：

<$p$p><$c$c>angular.module('ecom').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    //任何无与伦比的网址，发送到/仪表板
    $ urlRouterProvider.otherwise（/仪表板）;
    $ stateProvider
     .STATE（家，
             {
            网址：'/家，
            templateUrl：提交的/ home / home.html做为
             }）
      .STATE（'费用'，
              {
            网址：'/费'，
            templateUrl：提交/支出/支出-list.html'，
            控制器：'SubmitterExpensesCtrl
              }）
        .STATE（'收据'，
              {
            网址：'/收据，
            templateUrl：提交/收据/ receipts.html
              }）
        .STATE（设置，
             {
            网址：/设置
            templateUrl：设置/ settings.html'，
            控制器：'SettingCtrl
             }）
        .STATE（'注销'，
              {
            网址：'/注销，
            templateUrl：'注销/ logout.html'，
            控制器：'LogoutCtrl
              }）
        .STATE（信息搜索结果'，
                {
            网址：'/信息搜索结果'，
            templateUrl：ExpenseResult / searchresult.html'，
            控制器：'resultCtrl
                }）
}]）;
这是index.page：
＆LT; NAV＆GT;＆LT;搜索和GT;＆LT; /搜索＆GT;＆LT; / NAV＆GT; //当点击搜索，就会触发一个Ajax调用，我将结果显示在searchresult.html
＆LT; D​​IV CLASS =身体容器＆GT;
        ＆LT; D​​IV CLASS =COL-MD-1＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =集装箱APP-包装COL-MD-12的UI视图＆gt;＆LT; / DIV＆GT; //主要内容将显示在这里。
        ＆LT; D​​IV CLASS =COL-MD-1＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT;页脚和GT;＆LT; /页脚＆GT;

我如何更改网址/结果，并在索引页显示searchresult.html？
我可以尝试$ location.path（'/信息搜索结果'）在阿贾克斯seccuee方法？

解决方案

注入$状态到控制器中，并调用$ state.go（Statename的），一旦$ HTTP / $资源调用返回的承诺。

所以你的情况，类似...

  $ http.post（/ AJAX）
。然后（功能（数据，状态，头，配置）{
    $ state.go（信息搜索结果）;
}）
 

Now I am trying to fire a ajax for search. after I $http( may be $resourse just ajax) success, I need to update the ui-view in index.page to show the result. Here is my code:

angular.module('ecom').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    //for any unmatched url,send to /dashboard
    $urlRouterProvider.otherwise("/dashboard");
    $stateProvider
     .state('home',
             {
            url:'/home',
            templateUrl:'submitter/home/home.html'
             }) 
      .state('expenses',
              {
            url:'/expenses',
            templateUrl:'submitter/expenses/expense-list.html',
            controller:'SubmitterExpensesCtrl'
              })
        .state('receipts',
              {
            url:'/receipts',
            templateUrl:'submitter/receipts/receipts.html'
              })
        .state('settings',
             {
            url:'/settings',
            templateUrl:'settings/settings.html',
            controller:'SettingCtrl'
             })
        .state('logout',
              {
            url:'/logout',
            templateUrl:'logout/logout.html',
            controller:'LogoutCtrl'
              })
        .state('searchResult',
                {
            url:'/searchresult',
            templateUrl:'ExpenseResult/searchresult.html',
            controller:'resultCtrl'     
                })
}]);
This is index.page :
<nav><search></search></nav> // When click search, it will fire a ajax call, I will display the result in searchresult.html
<div class="body-container">
        <div class="col-md-1"></div>
        <div class="container app-wrapper col-md-12" ui-view></div> //the main content will display here.
        <div class="col-md-1"></div>
    </div>
<footer></footer>

How can I change the url to /result and display the searchresult.html in of index page? Can I try $location.path('/searchresult') in ajax seccuee method?;

解决方案

Inject $state into your controller and call $state.go(statename) once the $http/$resource call has returned the promise.

So in your case, something like...

$http.post("/ajax")
.then(function(data, status, headers, config) {
    $state.go("searchResult");
})

这篇关于如何angularjs阿贾克斯成功后更改UI视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！