当插入的ui-sref名称改变时，State's href不会改变

State's href does not change when the interpolated ui-sref name changes

本文关键字：改变 href State 插入 ui-sref      更新时间：2023-09-26

我有一个应用程序，其中下一个状态名称取决于用户所做的选择。我想在用户做出选择时更新状态名。状态名改变了，但url没有更新。

我代码:

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的问题还是我做错了什么?

我准备了一个plunk，你可以看到我想要达到的效果

将此代码更改为:

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

添加控制器:

$scope.changeState = function(newState){
   this.state = newState;
   $state.go(newState);
}
相关文章：