Question

我有app，其下一个州名依赖于用户的选择。我想在用户做出选择时更新州名。状态名称更改但网址未更新。

我的代码：

var app = angular.module('routerTest', ['ui.router']);

app.config(function($stateProvider){
$stateProvider
  .state('home', {
    template: '<div><h1>Home state</h1></div>',
    url: 'home'
  })
  .state('foo', {
    template: '<div><h1>Foo state</h1></div>',
    url: 'foo'
  })
  .state('bar', {
    template: '<div><h1>Bar state</h1></div>',
    url: 'bar'
  })
})
.controller('appController', function(){
  this.availableStates = ['home', 'foo', 'bar'];

  // once the state is defined, the href value does not change
  this.state = this.availableStates[0];
})
.run();

主要观点：

<div ng-controller="appController as app">
  <ul>
    <li ng-repeat="state in app.availableStates">
      <button type="button" ng-click="app.state=state">{{ state }}</button>
    </li>
  </ul>

  <a ui-sref="{{ app.state }}">My href does not change :(</a>
  <h3>View</h3>
  <div style="min-height: 100px; border: 1px solid red;" ui-view></div>
</div>

这是ui-router的问题还是我做错了什么？

I've prepared a plunk where you can see what I am trying to achieve

Answer 1

将此代码更改为：

<button type="button" 
   ng-click="changeState(state)">{{ state }}</button>

添加控制器：

$scope.changeState = function(newState){
   this.state = newState;
   $state.go(newState);
}

当插值的ui-sref名称改变时，状态的href不会改变

1 个答案: