Angular-翻译部分加载器不工作
Angular-Translate Partial loader isn't working
我正在使用 AngularJS 翻译,如果我按照 pascalprecht 教程中的说明使用它,我的 angular 应用程序会失败并且它不会显示任何内容(它不会加载部分视图), 所以我决定使用 angular-translate-partial-loader
我有一个应用程序菜单,我有一个 MenuCtrl 来显示选项,我想翻译这个菜单
这是我的代码
angular.module('myapp'['ngAnimate','ngAria','ngCookies','ngMessages','ngResource','ngRoute','ngSanitize', 'ngTouch', 'pascalprecht.translate'])
.value('language', 'bra')
.run(function ($rootScope, $translate)
{
$rootScope.$on('$translatePartialLoaderStructureChanged', function ()
{
$translate.refresh();
}
);
})
.config(function($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'translations/{lang}/{part}.json'
});
$translateProvider.preferredLanguage("bra");
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('myapp')
.controller('MenuCtrl', function ($scope, $translatePartialLoader) {
$translatePartialLoader.addPart('menu');
$scope.lItems = [
{
title: "HOME",
class:'active',
href:'/',
visible: true
},
{
title: "CLASSROOMS",
class:'',
href:'#',
visible: true
},
{
title: "EXPENSES",
class:'',
href:'#',
visible: true
},
{
title: "EARNINGS",
class:'',
href:'#',
visible: true
},
{
title: "STUDENTS",
class:'',
href:'#',
visible: true
}
];
});
在index.html
<div id="navbar" class="navbar-collapse collapse" ng-controller="MenuCtrl">
<ul class="nav navbar-nav" ng-repeat="lItem in lItems">
<li class="{{lItem.class}}"><a href="{{lItem.href}}">{{lItem.title | translate}}</a></li>
</ul>
</div>
你能帮帮我吗?
谢谢!
我终于找到了解决办法。
问题是菜单在 ng-view 块之外,当应用程序加载时没有刷新正确的 html 部分。
通过添加这个 $translatePartialLoaderProvider.addPart('menu');
.config(function ($translateProvider, $translatePartialLoaderProvider) {
$translatePartialLoaderProvider.addPart('menu');
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'translations/{lang}/{part}.json'
});
$translateProvider.preferredLanguage('bra');
.....
应用程序加载时,菜单部分也会加载。
我正在使用 AngularJS 翻译,如果我按照 pascalprecht 教程中的说明使用它,我的 angular 应用程序会失败并且它不会显示任何内容(它不会加载部分视图), 所以我决定使用 angular-translate-partial-loader
我有一个应用程序菜单,我有一个 MenuCtrl 来显示选项,我想翻译这个菜单
这是我的代码
angular.module('myapp'['ngAnimate','ngAria','ngCookies','ngMessages','ngResource','ngRoute','ngSanitize', 'ngTouch', 'pascalprecht.translate'])
.value('language', 'bra')
.run(function ($rootScope, $translate)
{
$rootScope.$on('$translatePartialLoaderStructureChanged', function ()
{
$translate.refresh();
}
);
})
.config(function($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'translations/{lang}/{part}.json'
});
$translateProvider.preferredLanguage("bra");
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('myapp')
.controller('MenuCtrl', function ($scope, $translatePartialLoader) {
$translatePartialLoader.addPart('menu');
$scope.lItems = [
{
title: "HOME",
class:'active',
href:'/',
visible: true
},
{
title: "CLASSROOMS",
class:'',
href:'#',
visible: true
},
{
title: "EXPENSES",
class:'',
href:'#',
visible: true
},
{
title: "EARNINGS",
class:'',
href:'#',
visible: true
},
{
title: "STUDENTS",
class:'',
href:'#',
visible: true
}
];
});
在index.html
<div id="navbar" class="navbar-collapse collapse" ng-controller="MenuCtrl">
<ul class="nav navbar-nav" ng-repeat="lItem in lItems">
<li class="{{lItem.class}}"><a href="{{lItem.href}}">{{lItem.title | translate}}</a></li>
</ul>
</div>
你能帮帮我吗?
谢谢!
我终于找到了解决办法。
问题是菜单在 ng-view 块之外,当应用程序加载时没有刷新正确的 html 部分。
通过添加这个 $translatePartialLoaderProvider.addPart('menu');
.config(function ($translateProvider, $translatePartialLoaderProvider) {
$translatePartialLoaderProvider.addPart('menu');
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'translations/{lang}/{part}.json'
});
$translateProvider.preferredLanguage('bra');
.....
应用程序加载时,菜单部分也会加载。