我有一个应用程序,其中下一个状态名称取决于用户所做的选择。我想在用户做出选择时更新状态名。状态名改变了,但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);
}