angular.js - angular ui bootstrap 中文顯示問題
問題描述
ui bootstrap 的datepicker popup沒法顯示中文，查了之后要引用語(yǔ)言包(<script src='http://www.b3g6.com/wenda/scripts/i18n/angular-locale_zh-cn.js'></script>)，引用了之后也不能顯示，console.log提示錯(cuò)誤，如圖： 
在線編輯：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.b3g6.com/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：這種問題我也遇見過，其實(shí)就是路徑問題。你點(diǎn)擊這個(gè)文件看錯(cuò)誤點(diǎn)你會(huì)發(fā)現(xiàn)你這js里面的內(nèi)容就是你的首頁(yè)。路徑引用錯(cuò)誤問題。
相關(guān)文章：
1. docker綁定了nginx端口 外部訪問不到2. git - webstorm窗口中左側(cè)列表的文件名顏色怎么修改3. android權(quán)限被第三方安全軟件禁止，如何獲取該權(quán)限狀態(tài)4. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問題！！5. docker images顯示的鏡像過多，狗眼被亮瞎了，怎么辦？6. javascript - 深夜被問題困擾求解惑，rn的API之PermissionsAndroidd的問題7. mysql - 我的myeclipse一直連顯示數(shù)據(jù)庫(kù)連接失敗，不知道為什么8. tp 6.0 數(shù)據(jù)查詢，求教！9. Discuz! Q 有人用過嗎?10. javascript - onclick事件點(diǎn)擊不起作用
網(wǎng)公網(wǎng)安備