Question

我正在将我的SPA从ng-route转换为ui.router。对于某人来说，这应该是一个快速的...

对于我的某些州，我定义了$rootScope.nextState和$rootscope.prevState属性（州名字符串），这样我的导航栏上就可以有上一个和下一个按钮/链接。

我似乎无法获得正确的链接。我试过了：

<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>代替。

全部抛出＆＃34;无效状态参考＆＃34;错误或不改变状态。如何在ui-router中使用statename的动态属性？

我已尽力阅读并理解文档。类似的问题没有帮助： https://stackoverflow.com/questions/23476296/dynamically-constructed-ui-sref-attribute-in-ui-router和 https://stackoverflow.com/questions/24349731/dynamically-set-the-value-of-ui-sref-angularjs

这里有Plunker重新创建问题。它在类似于angular-ui-router-title的方法中使用resolve。这可能是事情发生的时间......

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

1 个答案: