ui-sref 来自变量/属性

Question

我正在将我的 SPA 从 ng-route 过渡到 ui.router。这应该是给某人的 quick...

对于我的某些状态，我定义了 $rootScope.nextState 和 $rootscope.prevState 属性（statename 字符串），这样我就可以在我的导航栏上有 Previous 和 Next 按钮/ links .

我似乎无法正确理解 link。我试过：

<button ui-sref="{{prevState}}">Previous</button>

<button ui-sref={{prevState}}>Previous</button>

<button ui-sref="{prevState}">Previous</button>

<button ui-sref="prevState">Previous</button>

<button ng-href="{{$state.href(prevState)}}">Previous</button>

<button ng-click="$state.go(prevState)">Previous</button>

以上全部用 <a> 代替。

全部抛出 "Invalid state ref" 错误或不更改状态。如何在 ui-router 中为 statename 使用动态属性？

我已尽我所能阅读并理解文档。没有帮助的类似问题：和

这是一个 Plunker recreating the problem. It uses resolve in a method similar to angular-ui-router-title。问题可能出在时间上...

Answer 1

对于未来的读者，我采纳了@JB Nizet 的建议。

HTML

<button ng-click="goPrevious()" ng-disabled="!previousState">Previous</button>
<button ng-click="goNext()" ng-disabled="!nextState">Next</button>

JS

app.run( function($rootScope, $state) {

  $rootScope.$on('$stateChangeSuccess', function () {

    var previous = $state.$current.locals.globals.$prevState;
    var next = $state.$current.locals.globals.$nextState;

    $rootScope.previousState = previous;
    $rootScope.nextState = next;

    if (typeof previous !== 'undefined') {
        $rootScope.goPrevious = function() { $state.go(previous); };
    } else {
        $rootScope.goPrevious = function() { console.log ("No previous state found"); };
    }
    if (typeof next !== 'undefined') {
        $rootScope.goNext = function() { $state.go(next); };
    } else {
        $rootScope.goNext = function() { console.log ("No next state found"); };
    }

  });
});

ui-sref 来自变量/属性

ui-sref from variable / attribute

angularjs

angular-ui-router

ui-sref