angular.js - angular ui bootstrap 中文顯示問題
問題描述
ui bootstrap 的datepicker popup沒法顯示中文，查了之后要引用語言包(<script src='http://m.b3g6.com/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://m.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：這種問題我也遇見過，其實就是路徑問題。你點擊這個文件看錯誤點你會發現你這js里面的內容就是你的首頁。路徑引用錯誤問題。
相關文章：
網公網安備