angular.js - angular ui bootstrap 中文显示问题
问题描述
ui bootstrap 的datepicker popup没法显示中文，查了之后要引用语言包(<script src='https://www.haobala.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='https://www.haobala.com/wenda/example.js'></script> <link href='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' 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里面的内容就是你的首页。路径引用错误问题。
相关文章：
1. Android 高德地图如何实现拖动平移地图时地图上的小图标不动？2. android - 求 360浏览器 百度浏览器 搜狗浏览器的最新启动类名3. 微信端电子书翻页效果4. javascript - 在html中写了个<video>视频，浏览器却是一片空白为什么呢？360浏览器？5. pdo_mysql 值自增写法6. css - 前端flex布局嵌套内层的布局不起作用？7. html5 - HTML代码中的文字乱码是怎么回事？8. javascript - 微信小程序 wx.downloadFile下载文件大小有限制吗9. 安装sublime text 3 控制台的时候出现这个报错怎么办？10. php laravel框架模型作用域
网公网安备