2

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

我现在正在尝试使用 ui-router 状态来执行该功能，它似乎可以工作，因为我可以在检查但页面时看到标记中的“翻译”类（它在“法语”和“英语”之间切换）变化就像它试图加载一个不存在的视图或其他东西一样变为空白。

因此，我想防止这种行为，并尽可能简单地执行“不改变状态”的功能。

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

这是 ui-router 配置：

'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();
                //};
            });
        });
    }]);
}());

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

4

2 回答 2

1

基于如何使用ng-repeat菜单链接的问题，一个建议是使用创建ng-if一个不同的链接来管理切换，而不是为其设置任何属性languageng-clickhref

就像是

<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()调用您的语言服务

于 2015-01-10T20:14:53.173 回答
0

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

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

于 2015-01-10T20:06:10.397 回答