當插入的ui-sref名稱更改時，狀態的href不會更改

Question

我有應用程序，其中下一個狀態名稱取決於用戶所做的選擇。我想在用戶做出選擇時更新狀態名稱。狀態名稱會更改，但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路由器的問題還是我做錯了什麼？

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); 
}