【问题标题】:UI-Router's ui-sref creating wrong hrefUI-Router 的 ui-sref 创建错误的 href
【发布时间】:2016-08-11 11:55:27
【问题描述】:

我有一个带有 2 个 ui 视图的 SPA:标题和正文。标头由一个控制器运行,处理主体(取决于状态)的控制器调用我创建的服务函数,如下所示:

    /**
     * Sets the header bar's attributes
     *
     * @param inverse bool Whether the color scheme should be inverted
     * @param button bool Whether the back button should be presented
     * @param link string The route the back button will take the user to when pressed
     * @param title string The translation key to use for the title to be shown in the headerbar
     * @param data string Characters to be inserted in the span next to the title
     *
     **/
    return {
        set: function(inverse, button, link, title, data) {
            // set defaults
            inverse = typeof inverse !== 'undefined' ? inverse : false;
            button = typeof button !== 'undefined' ? button : false;
            link = typeof link !== 'undefined' ? link : $state.current.name;
            title = typeof title !== 'undefined' ? title : undefined;
            data = typeof data !== 'undefined' ? data : false;
            // store for HeaderController to retrieve
            $localStorage.headerInverse = inverse;
            $localStorage.headerBackButton = button;
            $localStorage.headerBackLink = link;
            $localStorage.headerTitle = title;
            $localStorage.headerData = data;

            broadcast.announce('setHeader');
        }
    };

像这样:

    header.set(true, true, 'app.search1', 'MY_PROFILE');

标头的控制器通过以下方式监听广播:

    broadcast.listenFor('setHeader', function() {
        vm.headerTitle = $localStorage.headerTitle; // expects the translation key to look up
        vm.headerData = $localStorage.headerData;
        vm.headerInverse = $localStorage.headerInverse;
        vm.headerBackLink = $localStorage.headerBackLink;
        vm.headerBackButton = $localStorage.headerBackButton;
        vm.headerMoreIcon = $localStorage.headerMoreIcon;
    });

并且标题的html有:

    <a ui-sref="{{ vm.headerBackLink }}"></a>

所以我的期望是:

    <a href="#/search1" ui-sref="app.search1"></a>

然而我得到的是:

    <a href="#/profile" ui-sref="app.search1"></a>

任何帮助将不胜感激。谢谢!

【问题讨论】:

标签: angularjs angular-ui-router


【解决方案1】:

不要动态传递状态名称,试试这个:

$scope.getLinkUrl = function(){
  return $state.href('state-name', {someParam: $scope.someValue});
};

 <a ng-href="{{getLinkUrl()}}">Dynamic Link</a>

参考:Dynamically set the value of ui-sref Angularjs

【讨论】:

  • 非常感谢!从来没有想过检查将状态名称动态传递给 ui-sref 的有效性。干杯!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-23
  • 1970-01-01
  • 1970-01-01
  • 2014-08-22
  • 2015-03-18
  • 2017-05-16
相关资源
最近更新 更多