如何在 Angular UI Router 和 NodeJS 中使用 ui-sref答案

【问题标题】：How to work with ui-sref in Angular UI Router and NodeJS如何在 Angular UI Router 和 NodeJS 中使用 ui-sref
【发布时间】：2015-01-02 07:22:30
【问题描述】：

我在 URL 路径 http://localhost:3000/u#/ 并单击 href 链接转到 http://localhost:3000/u#/76457898/profile。我需要在不向服务器发送请求的情况下发生这种情况。但这只会在我第二次点击href 链接时发生。

当我第一次点击它时，我会将自己重定向回http://localhost:3000/u#/76457898。只有我第二次点击它时，页面才不会被重定向，我只得到users.profile 状态采用<div ui-view><div>。

http://localhost:3000/u#/ 将我带到与http://localhost:3000/u#/76457898 相同的页面。

HTML

<a href="{{goToUIState('users.profile', user.userId)}}">
    <!--stuff-->
</a>

AngularJS 和 Angular UI 路由器

.state('users', {
    url: '/:userId',
    abstract: true,
    resolve: {
        user: ['$cookies', '$stateParams', '$http', 'localStorageService',
            function($cookies, $stateParams, $http, localStorageService) {
                var uid = $cookies.uid || localStorageService.get('uid');
                return $http.get('/api/users/' + uid).success(function (resp) {
                    localStorageService.set('uid', uid);
                    return resp;
                })
            }
        ]
    },
    views: {
        'home': {
            templateUrl: '/partials/user/index.html',
            controller: ['$scope','$state', 'user', '$stateParams', function($scope, $state, user, $stateParams) {
                $scope.user = user.data;

                //dynamic ui-sref do not work, so creating a function to do that with $state.href()
                $scope.goToUIState = function(state, userId) {
                    return $state.href(state, {userId: userId});
                }
                $state.go('users.home');
            }]
        }
    }
})

.state('users.home', {
    url: '',
    templateUrl: '/partials/user/users.home.html',
    controller: [$scope', 'user', function($scope, user) {
        $scope.user = user.data;
    }]

})

.state('users.profile', {
    url: '/profile',
    templateUrl: '/partials/user/users.profile.html',
    controller: ['$scope', '$rootScope', 'user', '$http', 'fileUpload',
        function($scope, $rootScope, user, $http, fileUpload) {
            $scope.user = user.data;
            //stuff
        }]
})

有人可以帮我理解为什么我只有在第二次单击href 链接时才能获得所需的第二次，我该如何解决这个问题？

我在服务器端使用 NodeJS/ExpressJS。

【问题讨论】：

我对你的 html 感到困惑。你不应该使用类似as per the docs 的东西吗？ <a ui-sref="users.profile({ userId: user.userId })">{{ xxx }}</a>
@DavidSpence：即使我使用<a ui-sref="users.profile({ userId: user.userId })">{{ xxx }}</a>，我也必须单击两次才能到达http://localhost:3000/u#/76457898/profile。我第一次点击时，它会到达http://localhost:3000/u#/76457898，当我第二次点击时，它最终会到达我想要的http://localhost:3000/u#/76457898/profile。
@DavidSpence：问题似乎与动态绑定部分有关。 github.com/angular-ui/ui-router/issues/395。因此，为了动态绑定某些东西，我必须按照我的方式使用 html。

标签： angularjs node.js redirect angular-ui-router ui-sref

【解决方案1】：

我认为您遇到此问题是因为 href 属性中使用的函数。前段时间我遇到了类似的问题（我也在开发一个应用程序，我正在使用 ui-router）。问题在于在标签内使用 href。

我认为this question 可能会有所帮助。了解浏览器如何解释空的href 属性很重要。

尝试在其他标签中使用您的功能，比如说在ul 列表和ui 元素（ng-click 指令）中创建一个菜单。这对我有帮助。

【讨论】：