角UI-路由器$ urlRouterProvider。当不工作时，我单击＆lt;一个UI的SREF =＆QUOT; ...＆QUOT;＆GT; [英] Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

问题描述

我。当（'/中心'，'/中/问题'）在我的角度web应用程序。

当我键入/中心在我的浏览器，它会重定向到/中心/问题作为我期待，但是当我点击＆LT;一个UI的SREF =中心的href =＃/中心＆GT;＆LT; / A＆GT; ，它不会重定向而仅仅停留在网址/中心。

有在我的控制台没有错误，我不知道为什么。

我在这里<一见种相似问题href=\"http://stackoverflow.com/questions/23658846/angular-ui-router-urlrouterprovider-when-not-working-anymore\">Angular UI的路由器$ urlRouterProvider。当不工作的了的。我尝试了答案，但它仍然不为我工作。

下面是我的CoffeeScript code：

  whenConfig = ['$ urlRouterProvider'，（$ urlRouterProvider） -  GT;
  ＃默认URL配置  $ urlRouterProvider
  不然的话/中心
  。当/中心，/中/问题
]stateConfig ='$ stateProvider'，（$ stateProvider） -  GT;
  ＃嵌套URL配置  利用=（S） -  GT;
    S [0] .toUpperCase（）+ S [1 ..]  mainConfig =（{
    名称：名称
    网址：/＃{name}的
    templateUrl：模板/＃（名称）。html的
    控制器：＃{大写名} CTRL
  }在名称['中心'，'关键字清单'，'keywordConfig'，'记录'，'静']）  centerConfig =（{
    名称：中心＃（名称）
    网址：/＃{name}的页面？
    templateUrl：模板/中/＃（名称）。html的
    控制器：中心＃{大写名} CTRL
  解决：
    THEAD：（CenterService） - ＆GT;
      CenterService.getThead @ self.name
    数据：（CenterService，$ stateParams） - ＆GT;
      CenterService.fetchItems @ self.name，$ stateParams.page
  }在名称['问题'，'答案'，'评论'，'文章']）  对于singleConfig在mainConfig
    $ stateProvider.state singleConfig  对于childConfig在centerConfig
    $ stateProvider.state childConfig
]的app.config whenConfig
的app.config stateConfig
 

解决方案

有一个新的工作plunker 的（延长角UI的路由器$ urlRouterProvider。当不工作* *了）的，这应与版本工作的 0.2.13 +

previous解决方案

此之前版本的 0.2.12 - ，我们可以使用 $ urlRouterProvider.when（），建议在documenation的（小举）的：

  

How于：设置默认/索引子状态

  
  

...结果
  如果你想parent.index网址是非空的，然后建立一个重定向在你module.config使用$ urlRouterProvider：

  $ urlRouterProvider.when（'/家'，一个'/ home /指数'）;
 

因此​​，这是在 Q＆放大器解决方案所示;一个上面提到的：

  VAR whenConfig = ['$ urlRouterProvider'，函数（$ urlRouterProvider）{    $ urlRouterProvider
      。当（'/应用/列表'，['$状态'，'为myService'，函数（$状态，为myService）{
            $ state.go（'app.list.detail'，{ID：myService.Params.id}）;
    }]）
    不然的话（'/应用程序'）;
}];
...
的app.config（whenConfig）
 

现在 - 我们不能。

UI-路由器 0.2.13 FIX

这是因为修理的（对此我根本不知道）的，在新闻稿中提及的 0.2.13

  

错误修正结果
   $状态：结果
   - ...结果
   - 避免从URL重新同步.transitionTo（后<一个href=\"https://github.com/angular-ui/ui-router/commit/b267ecd348e5c415233573ef95ebdbd051875f52\">b267ecd3,关闭＃1573 ）

这是<一个href=\"https://github.com/angular-ui/ui-router/commit/b267ecd348e5c415233573ef95ebdbd051875f52#diff-c414428d49b83a7461facd34b0b53496R280\">new code在urlRouter.js增加的：

 如果（lastPushedUrl＆安培;＆安培; $ location.url（）=== lastPushedUrl）
 //这一行停止corrent。当工作
 返回lastPushedUrl =不确定;lastPushedUrl =不确定;
 

这件code的的是优化/修复一些其他问题 ...而且，关闭 。当（） 功能

SOLUTION

如已经提到的，这种崭新 plunker 的示出了具有0.2.13+版本的方式。我们只需要听状态变化，如果状态为app.list我们可以去它的详细一些ID ...

  VAR onChangeConfig = ['$ rootScope'，'$州'，
 功能（$ rootScope，$州）{  $ rootScope。在（'$ stateChangeStart'$，功能（事件，toState）{
    如果（toState.name ===app.list）{
      。事件preventDefault（）;
      $ state.go（'app.list.detail'，{ID：2}）;
    }
  }）;}]
 

在这里检查 plunker

I have .when('/center', '/center/question') in my angular web app.

When I type '/center' in my browser it will redirect to '/center/question' as I expect but when I click the <a ui-sref="center" href="#/center"></a>, it won't redirect and just stay on the url '/center'.

There is no error in my console and I don't know why.

I see one similar issue here Angular UI-Router $urlRouterProvider .when not working anymore.I try the answer but it still don't work for me.

Here is my coffeescript code:

whenConfig = ['$urlRouterProvider', ($urlRouterProvider) ->
  # default url config

  $urlRouterProvider
  .otherwise '/center'
  .when '/center', '/center/question'
]

stateConfig = ['$stateProvider', ($stateProvider) ->
  # nested url config

  capitalize = (s)->
    s[0].toUpperCase() + s[1..]

  mainConfig = ({
    name: name
    url: "/#{name}"
    templateUrl: "templates/#{name}.html"
    controller: "#{capitalize name}Ctrl"
  } for name in ['center', 'keywordList', 'keywordConfig', 'log', 'stat'])

  centerConfig = ({
    name: "center.#{name}"
    url: "/#{name}?page"
    templateUrl: "templates/center/#{name}.html"
    controller: "Center#{capitalize name}Ctrl"
  resolve:
    thead: (CenterService) ->
      CenterService.getThead @self.name
    data: (CenterService, $stateParams) ->
      CenterService.fetchItems @self.name, $stateParams.page
  } for name in ['question', 'answer', 'comment', 'article'])

  for singleConfig in mainConfig
    $stateProvider.state singleConfig

  for childConfig in centerConfig
    $stateProvider.state childConfig
]

app.config whenConfig
app.config stateConfig

解决方案

There is a new working plunker (extending the Angular UI-Router $urlRouterProvider .when not working *anymore*), which should be working with the version 0.2.13+

Previous solution

Until version 0.2.12- we could use $urlRouterProvider.when(), suggested in documenation (small cite):

How to: Set up a default/index child state

...
if you want the 'parent.index' url to be non-empty, then set up a redirect in your module.config using $urlRouterProvider:

 $urlRouterProvider.when('/home', '/home/index');

So this was solution shown in the Q & A mentioned above:

var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];
...
app.config(whenConfig) 

Now - we cannot.

UI-Router "FIX" in 0.2.13

It is due to "FIX" (which I am simply not sure about), mentioned in the release 0.2.13

Bug Fixes
$state:
- ...
- Avoid re-synchronizing from url after .transitionTo (b267ecd3, closes #1573)

And here is the new code added in the urlRouter.js:

if (lastPushedUrl && $location.url() === lastPushedUrl)
 // this line stops the corrent .when to work
 return lastPushedUrl = undefined;

lastPushedUrl = undefined;

This piece of code is optimizing/fixing some other issue ... but also, turning off the .when() functionality

SOLUTION

As already mentioned, this brand new plunker shows the way with version 0.2.13+. We just have to listen to state change, and if the state is "app.list" we can go to its detail with some id...

var onChangeConfig = ['$rootScope', '$state',
 function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name === "app.list") { 
      event.preventDefault();
      $state.go('app.list.detail', {id: 2});
    }
  });

}]

Check the plunker here

这篇关于角UI-路由器$ urlRouterProvider。当不工作时，我单击＆lt;一个UI的SREF =＆QUOT; ...＆QUOT;＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！