angular.js - angular ui bootstrap 中文顯示問題
問題描述
ui bootstrap 的datepicker popup沒法顯示中文，查了之后要引用語言包(<script src='http://www.aoyou183.cn/wenda/scripts/i18n/angular-locale_zh-cn.js'></script>)，引用了之后也不能顯示，console.log提示錯誤，如圖： 
在線編輯：https://plnkr.co/edit/UMpgams...
html:
<!doctype html><html ng-app='ui.bootstrap.demo'> <head> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js'></script> <script src='https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js'></script> <script src='http://www.aoyou183.cn/wenda/example.js'></script> <link rel='stylesheet'> <script src='https://github.com/angular/code.angularjs.org/blob/master/1.0.0/i18n-1.0.0/angular-locale_zh-cn.js'></script> </head> <body><style> .full button span { background-color: limegreen; border-radius: 32px; color: black; } .partially button span { background-color: orange; border-radius: 32px; color: black; }</style><p ng-controller='DatepickerPopupDemoCtrl'> <pre>Selected date is: <em>{{dt | date:’fullDate’ }}</em></pre> <h4>Popup</h4> <p class='row'> <p class='col-md-6'><p class='input-group'> <input type='text' uib-datepicker-popup='{{format}}' ng-model='dt' is-open='popup1.opened' datepicker-options='dateOptions' ng-required='true' close-text='Close' alt-input-formats='altInputFormats' /> <span class='input-group-btn'> <button type='button' ng-click='open1()'><i class='glyphicon glyphicon-calendar'></i></button> </span></p> </p> <p class='col-md-6'><p class='input-group'> <input type='text' uib-datepicker-popup ng-model='dt' is-open='popup2.opened' datepicker-options='dateOptions' ng-required='true' close-text='Close' /> <span class='input-group-btn'> <button type='button' ng-click='open2()'><i class='glyphicon glyphicon-calendar'></i></button> </span></p> </p> </p> <p class='row'> <p class='col-md-6'><label>Format: <span class='muted-text'>(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select ng-model='format' ng-options='f for f in formats'><option></option></select> </p> </p> <hr /> <button type='button' ng-click='today()'>Today</button> <button type='button' ng-click='setDate(2009, 7, 24)'>2009-08-24</button> <button type='button' ng-click='clear()'>Clear</button> <button type='button' ng-click='toggleMin()' uib-tooltip='After today restriction'>Min date</button></p> </body></html>
js:
angular.module(’ui.bootstrap.demo’, [’ngAnimate’, ’ngSanitize’, ’ui.bootstrap’]);angular.module(’ui.bootstrap.demo’).controller(’DatepickerPopupDemoCtrl’, function ($scope) { $scope.today = function() { $scope.dt = new Date(); }; $scope.today(); $scope.clear = function() { $scope.dt = null; }; $scope.inlineOptions = { customClass: getDayClass, minDate: new Date(), showWeeks: true }; $scope.dateOptions = { dateDisabled: disabled, formatYear: ’yy’, maxDate: new Date(2020, 5, 22), minDate: new Date(), startingDay: 1 }; // Disable weekend selection function disabled(data) { var date = data.date, mode = data.mode; return mode === ’day’ && (date.getDay() === 0 || date.getDay() === 6); } $scope.toggleMin = function() { $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date(); $scope.dateOptions.minDate = $scope.inlineOptions.minDate; }; $scope.toggleMin(); $scope.open1 = function() { $scope.popup1.opened = true; }; $scope.open2 = function() { $scope.popup2.opened = true; }; $scope.setDate = function(year, month, day) { $scope.dt = new Date(year, month, day); }; $scope.formats = [’dd-MMMM-yyyy’, ’yyyy/MM/dd’, ’dd.MM.yyyy’, ’shortDate’]; $scope.format = $scope.formats[0]; $scope.altInputFormats = [’M!/d!/yyyy’]; $scope.popup1 = { opened: false }; $scope.popup2 = { opened: false }; var tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); var afterTomorrow = new Date(); afterTomorrow.setDate(tomorrow.getDate() + 1); $scope.events = [ { date: tomorrow, status: ’full’ }, { date: afterTomorrow, status: ’partially’ } ]; function getDayClass(data) { var date = data.date, mode = data.mode; if (mode === ’day’) { var dayToCheck = new Date(date).setHours(0,0,0,0); for (var i = 0; i < $scope.events.length; i++) {var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);if (dayToCheck === currentDay) { return $scope.events[i].status;} } } return ’’; }});
問題解答
回答1：這種問題我也遇見過，其實就是路徑問題。你點擊這個文件看錯誤點你會發(fā)現(xiàn)你這js里面的內(nèi)容就是你的首頁。路徑引用錯誤問題。
相關(guān)文章：
1. 如何修改phpstudy的phpmyadmin放到其他地方2. java 排序的問題3. 我的html頁面一提交，網(wǎng)頁便顯示出了我的php代碼，求問是什么原因？4. 網(wǎng)絡(luò)傳輸協(xié)議 - 以下三種下載方式有什么不同？如何用python模擬下載器下載？5. angular.js - Angular路由和express路由的組合使用問題6. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？7. tp6表單令牌8. 老哥們求助啊9. php - mysql中，作為主鍵的字段，用int類型，是不是比用char類型的效率更高？10. django - 后臺返回的json數(shù)據(jù)經(jīng)過Base64加密，獲取時用python如何解密~！
網(wǎng)公網(wǎng)安備