angular.js - angular ui bootstrap 中文顯示問題
問題描述
ui bootstrap 的datepicker popup沒法顯示中文，查了之后要引用語言包(<script src='http://www.cgvv.com.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.cgvv.com.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. mysql - linux連接數(shù)據(jù)庫報錯2. python - flask報錯ValueError: invalid key ’nicknickname’3. javascript - 有適合開發(fā)手機端Html5網(wǎng)頁小游戲的前端框架嗎？4. javascript - h5微信中怎么禁止橫屏5. MySQL中的enum類型有什么優(yōu)點？6. php - MySQL數(shù)據(jù)庫設(shè)計，獲取點贊的人數(shù)7. python3.x - python連oanda的模擬交易api獲取json問題第二問8. mysql - 這種分級一對多，且分級不平衡的模型該怎么設(shè)計表？9. java - 線上應(yīng)用，如果數(shù)據(jù)庫操作失敗的話應(yīng)該如何處理？10. MYSQL 根據(jù)兩個字段值查詢 但兩個值的位置可能是互換的，這個怎么查？
網(wǎng)公網(wǎng)安備