使用 ui-router 在不改变状态的情况下简单地启动一个功能

Question

我有一个 LanguageSwitcher 服务和一个 LanguageSwitcher.switchLanguage() 函数，可以用来在法语和英语之间切换语言。

我现在正在尝试使用 ui-路由器状态来执行该功能，它似乎可以工作，因为我可以看到 'translated' class（它在 'french' 和 'english') 检查时更改标记，但页面变为空白，就像它试图加载不存在的视图或其他内容一样。

所以我想防止这种行为，并尽可能简单地执行函数 'without changing the state'。

<a ui-sref="language">Toggle</a>

这是 ui-路由器配置：

'use strict';

(function() {
    angular.module('frontApp')
        .run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        }]
    )
    .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){
        $urlRouterProvider
            .otherwise('/');
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/views/home.html',
                controller: 'HomeCtrl'
            })
            .state('home.rules', {
                url: '^/rules',
                templateUrl: '/views/rules.html'
            })
            .state('home.terms', {
                url: '^/terms',
                templateUrl: '/views/terms.html'
            })
            .state('home.faq', {
                url: '^/faq',
                templateUrl: '/views/faq.html'
            })
            .state('language', {
                controller: ['LanguageSwitcher', function(LanguageSwitcher) {
                    LanguageSwitcher.switchLanguage();
                }]
            });
        $locationProvider.html5Mode(true);
    }]);
}());

这是因为我的菜单是动态的，切换不是导航栏的最后一项：

<header ng-controller="NavbarCtrl">
    <h1><a class="navbar-brand" ui-sref="home">{{ 'siteTitle' | translate }}</a></h1>
    <ul class="nav navbar-nav navbar-right">
        <li ng-repeat="item in menu" ui-sref-active="active">
            <a ui-sref="{{item.state}}" ng-href="{{item.link}}">{{item.title}}</a>
        </li>
    </ul>
</header>

navbar.js 文件：

'use strict';

(function() {
    angular.module('frontApp').controller('NavbarCtrl', ['$scope', '$translate', '$location', '$rootScope', function ($scope, $translate, $location, $rootScope) {
        $rootScope.$on('$translateChangeSuccess', function () {
            $translate(['linkHome', 'linkRules', 'linkTerms', 'linkFAQ', 'language', 'otherLanguage', 'linkMainSite']).then(function (translations) {
                $scope.menu = [
                    {
                        'title': translations.linkHome,
                        'link': '/',
                        'state': 'home'
                    },
                    {
                        'title': translations.linkRules,
                        'link': '/rules',
                        'state': 'home.rules'
                    },
                    {
                        'title': translations.linkTerms,
                        'link': '/terms',
                        'state': 'home.terms'
                    },
                    {
                        'title': translations.linkFAQ,
                        'link': '/faq',
                        'state': 'home.faq'
                    },
                    {
                        'title': translations.language,
                        'link': '/'+translations.otherLanguage,
                        'state': 'language'
                    },
                    //{
                    //    'title': translations.linkMainSite,
                    //    'link': 'http://'+translations.linkMainSite,
                    //    'state': ''
                    //}
                ];
                //$scope.isActive = function(route) {
                //   return route === $location.path();
                //};
            });
        });
    }]);
}());

我错过了什么？非常感谢您的时间和帮助。

Answer 1

从您的post的许多评论中可以推断出这一点：没有理由使用状态来调用语言切换器。

相反，您可能只想使用 ng-controller 在菜单中包含控制器，或者创建一个 component/directive，然后通过使用 ngClick 调用服务方法。

Answer 2

基于如何将 ng-repeat 用于菜单 link 的问题，一个建议是使用 ng-if 为 [= 创建一个不同的 link 13=] 使用 ng-click 来管理切换并且不为其设置任何 href 属性

类似

<li ng-repeat="item in menu" ui-sref-active="active">
    <a ng-if="item.state !== 'language'" ui-sref="{{item.state}}" ng-href="{{item.link}}">{{item.title}}</a>
    <a ng-if="item.state === 'language'" ng-click="switchLang()">{{item.title}}</a>
</li>

然后在 NavbarCtrl 控制器中 switchLang() 调用您的语言服务

使用 ui-router 在不改变状态的情况下简单地启动一个功能

Using ui-router to simply launch a function without changing state

javascript

angularjs

angular-ui-router

angular-translate