问题1：

Question

我有一个概念性的问题，我有一个网站，一行有4个部分

-------------------------------------------------------------------------------------------
| header                                                                                  |
-------------------------------------------------------------------------------------------
|            |                               |                                     |      |
| 1          | 2                             | 3                                   | 4    |
| Side Menu  | <div ui-view='ui_side_view'>  | <div ui-view='ui_container_view'>   |      |
-------------------------------------------------------------------------------------------

第2节有<ng-view>标签，所以我无法在其他任何地方使用它（对吧？）现在我想尝试这样的概念：

/ charter的网址 - 当没有参数时 - 在第2节
/ charter的网址？id = 1 - 当＆＃34; id＆＃34;存在 - 在第2节中加载历史记录，在第3节

路由器就像：

.when('/charter', { controller: 'CharterCtrl', template: '<div ng-include="templateUrl">Loading...</div>' })

问题1：

当网址更改为/charter?id=2时 - 没有任何反应（我使用的是html5mode）这是我的主要问题，除此之外，我有一个动态模板代码来解决下面的问题＃2 ......

问题2：

对此也很好奇，如果我将routeProvider更改为：

.when('/charter', { controller: 'CharterCtrl', template: '<div ng-include="templateUrl">Loading...</div>' })
.when('/charter/:id', { controller: 'CharterContainerCtrl', template: '<div ng-include="templateUrl">Loading...</div>', })

如何在URL中组合多个参数，如：

/charter?id=4&cache=true

现在，如果网址格式为

/charter/<id>/ ... < where the "cache" goes ?

使用$ stateParam更新

我的HTML现在是：

第2节有：<div ui-view="ui_side_view"></div>
第3节有：<div ui-view="ui_container_view"></div>

他们似乎只是第一次工作，因为＆＃34; templateUrl＆＃34;来自$ stateProvider确实将内容放在正确的位置...... 但任何其他URL更改 - 没有任何反应

所以我的路由器现在是：

$stateProvider
    .state('index', {
        url: "/index.pcgi",
        views: {
            "ui_side_view": { templateUrl: "templates/empty.html" },
            "ui_container_view": { template: "index.side.empty" }
        }
    })
    .state('charter', {
        url: "/charter.pcgi",
        views: {
            "ui_side_view": { template: "charter.ui_side_view <a href='/charter.pcgi/q/test'>click</a>", controller: "CharterCtrl" },
            "ui_container_view": { template: "charter.ui_container_view", controller: "CharterContainerCtrl" }
        }
    })    
    .state('charter.q', {     
        url: "/charter.pcgi/q/:q",        
        views: {
            "ui_side_view": { template: "charter.q.ui_side_view", controller: "CharterCtrl" },
            "ui_container_view": { template: "charter.q.ui_container_view", controller: "CharterContainerCtrl" }
        }
    });

在我的controller.js中我试图调试：

.controller('CharterContainerCtrl', ['$scope', '$state','$stateParams', function ($scope, $state, $stateParams) {

    console.debug($state.params);
    console.debug($stateParams);

}]);

两者都是空的

从以下位置更改网址时

/charter.pci到/charter.pcgi/q/test1 - 正在加载模板并且控制器已加载，我看到console.debug() msgs。
/charter.pcgi/q/test1至/charter.pcgi/q/test2/没有任何反应，控制器未再次加载，因为我看不到console.debug()消息。
从/charter.pcgi/q/test2/回到/index.pcgi - 有效。

Plunker：http://plnkr.co/edit/QhabHDvi29Texwy8G441

您可以在charter.pcgi和index.pcgi按钮之间来回播放
但是如果你点击charter.pcgi按钮里面来启动/charter.pcgi/q/someid - 它什么都不做

提前致谢。

Answer 1

要使用ui-router调用状态更改，您应该实际使用ui-router内置指令ui-sref而不是href

在html中，这是向你的州过渡的一些例子

<button ui-sref="charter"></button>
<button ui-sref="charter.q({ q: myparamvalue})"></button>

如果你需要，你可以在JS中使用

$state.go('charter');
$state.go('charter.q',{ q: myparamvalue});

希望它能解决您的问题，如果您仍在处理某个问题，请告诉我。

编辑：

经过长时间谈论Ricky的确切想要，我们找到了问题所在。

Actualy他不知道在ui-router中正确使用nester状态

我们最终做到了这一点:(在plunker工作只是在某个地方添加空间，如果它不起作用）。

这是状态

$stateProvider
    .state('index', {
      url: "",
      views: {
            "ui_side_view": { templateUrl: "empty.html" },
            "ui_container_view": { template: "index.side.empty <button ui-sref='charterq({ q: 1})')>q=1</button>" }
        }
    }) 
    .state('charter', {
        url:"/charter.pcgi",
        views: {
            "ui_side_view": { templateUrl: "charter.side.html", controller: "CharterCtrl" },
            "ui_container_view": { templateUrl: "charter.container.html", controller: "CharterContainerCtrl" },
        }  
    })    
    .state('charterq', {     
        url: "/charter.pcgi/q/{q}",         
        views: {
            "ui_side_view": { templateUrl: "charter.side.html", controller: "CharterCtrl" },
            "ui_container_view": { templateUrl: "charter.container.html", controller: "CharterContainerCtrl" },
        }
    });

在HTML中有两个名为＆＃34; ui_side_view＆＃34;的nester ui-view;和＆＃34; ui_container_view＆＃34;

除了这个答案，我还认为charterq州可以＆＃34;可能＆＃34;是charter的子状态。但他需要在后果中修改index.html模板。

如果你从这个＆＃34; q＆＃34;加载一个资源，请记住。参数你更喜欢对你使用ui_container_view，因为@mhadadi在另一个答案中说：

"ui_container_view": { template: "charter.q.ui_container_view", controller: "CharterContainerCtrl" ,
                            resolve:{
                                        q:function($http){
                                             return //your http call
                                           },              
                                     }
                                 }
                }

你可以在相关的控制器中得到这样的结果：

.controller('CharterContainerCtrl', function ($scope, $state, $stateParams, q) {
    console.debug(q); //This q will be the "data" return by your $http call in the resolve.
    console.debug($state.params);
    console.debug($stateParams);

}]);

很高兴我们终于成功了：）

Answer 2

我认为ui-routing中的解决方案可能对您有所帮助像这样的东西

.state('project', {
              url: "/:proId",
              templateUrl:function($stateParams){return "/project/main/view?pro="+$stateParams.proId },
              resolve:{
                 proId: ['$stateParams', function($stateParams,proId){
                        return $stateParams.proId;
                    }],             
                }})

包含您的包机价值

.state('charter.q', {     
        url: "/charter.pcgi/q/:q",        
        views: {
            "ui_side_view": { template: "charter.q.ui_side_view", controller: "CharterCtrl" },
            "ui_container_view": { template: "charter.q.ui_container_view", controller: "CharterContainerCtrl" ,
                            resolve:{
                                        q: ['$stateParams', function($stateParams,q){
                                             return $stateParams.q;
                                           }],              
                                     }
                                 }
                }

AngularJS和RouteProvider如何更新页面中的一小部分

问题1：

问题2：

使用$ stateParam更新

2 个答案: