ui.bootstrap.tpls 覆盖 template/datepicker/popup.html 模板
ui.bootstrap.tpls override template/datepicker/popup.html template
我创建了一个新的 template/datepicker/popup.html 模板,它会在 ui.bootstrap.tpls 之后加载。
我遇到的困难是在新模板中从 ng-click 调用一个函数。我不想更新ui.bootstrap.tpls文件。我尝试了两种不同的方式:
1) 不太理想: 使用 ui.bootstrap.tpls 的指令 datepickerPopup 中已经存在的 select 函数。我可以通过转换为 .toLocaleDateString() 使其部分工作,但在第一次点击后我再次打开日历,日历仍然显示当前日期而不是反映更新日期。
"<button class='btn btn-default' ng-click='select(date.setTime(date.getTime()+30 * 86400000).toLocaleDateString())'>30 days</button>" +
2) 理想: 在 ui.bootstrap.tpls 之外创建一个名为 addDays(n) 的全新函数。我无法从新模板访问此功能。我想创建自己的函数以从新模板调用。
"<button class='btn btn-default' ng-click='addDays(date, 30)'>30 days</button>" +
笨蛋:
我今天花了更多时间修改这个,并想出了解决我自己问题的方法。
当你覆盖模板时,将 ng-controller="ControllerName" 添加到外部元素,在我的例子中是 div。然后你需要将你的控制器添加到模块中,在我的解决方案中我只是将控制器添加到 popupTemplate.js.
更新的 Plunker:
http://plnkr.co/edit/YLJW2imcDAbzwsvp58Rl
Javascript 文件名 popupTemplate.js。代码:
(function() {
'use strict';
angular.module("template/datepicker/popup.html", [])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/datepicker/popup.html",
"<div ng-controller='ExampleCtrl'>" +
"<ul class=\"dropdown-menu\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}\" ng-keydown=\"keydown($event)\">\n" +
" <li ng-transclude></li>\n" +
" <li ng-if=\"showButtonBar\" style=\"padding:10px 9px 2px\">\n" +
" <span class=\"btn-group pull-left\">\n" +
" <button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"select('today')\">{{ getText('current') }}</button>\n" +
" <button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"select(null)\">{{ getText('clear') }}</button>\n" +
" </span>\n" +
" <button type=\"button\" class=\"btn btn-sm btn-success pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n" +
" </li>\n" +
"</ul>\n" +
"<div class=\"dropdown-menu-extend\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px'}\">" +
"<h4 >or select a future date here...</h4>" +
"<div class='col-lg-6'>" +
"<h5>Add a new function</h5>" +
"<button class='btn btn-default' ng-click='select(addDays(date, 30))'>30 days</button>" +
"</div>" +
"</div>" +
"</div>" +
"");
}])
.controller('ExampleCtrl', function ($scope) {
$scope.addDays = addDays;
function addDays(date, days) {
var newDate = date.setTime(date.getTime()+days * 86400000); //epoch date
var finalDate = new Date(newDate); //formatdate
console.log(finalDate);
return finalDate;
}
});
})();
我创建了一个新的 template/datepicker/popup.html 模板,它会在 ui.bootstrap.tpls 之后加载。
我遇到的困难是在新模板中从 ng-click 调用一个函数。我不想更新ui.bootstrap.tpls文件。我尝试了两种不同的方式:
1) 不太理想: 使用 ui.bootstrap.tpls 的指令 datepickerPopup 中已经存在的 select 函数。我可以通过转换为 .toLocaleDateString() 使其部分工作,但在第一次点击后我再次打开日历,日历仍然显示当前日期而不是反映更新日期。
"<button class='btn btn-default' ng-click='select(date.setTime(date.getTime()+30 * 86400000).toLocaleDateString())'>30 days</button>" +
2) 理想: 在 ui.bootstrap.tpls 之外创建一个名为 addDays(n) 的全新函数。我无法从新模板访问此功能。我想创建自己的函数以从新模板调用。
"<button class='btn btn-default' ng-click='addDays(date, 30)'>30 days</button>" +
笨蛋:
我今天花了更多时间修改这个,并想出了解决我自己问题的方法。
当你覆盖模板时,将 ng-controller="ControllerName" 添加到外部元素,在我的例子中是 div。然后你需要将你的控制器添加到模块中,在我的解决方案中我只是将控制器添加到 popupTemplate.js.
更新的 Plunker: http://plnkr.co/edit/YLJW2imcDAbzwsvp58Rl
Javascript 文件名 popupTemplate.js。代码:
(function() {
'use strict';
angular.module("template/datepicker/popup.html", [])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/datepicker/popup.html",
"<div ng-controller='ExampleCtrl'>" +
"<ul class=\"dropdown-menu\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}\" ng-keydown=\"keydown($event)\">\n" +
" <li ng-transclude></li>\n" +
" <li ng-if=\"showButtonBar\" style=\"padding:10px 9px 2px\">\n" +
" <span class=\"btn-group pull-left\">\n" +
" <button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"select('today')\">{{ getText('current') }}</button>\n" +
" <button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"select(null)\">{{ getText('clear') }}</button>\n" +
" </span>\n" +
" <button type=\"button\" class=\"btn btn-sm btn-success pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n" +
" </li>\n" +
"</ul>\n" +
"<div class=\"dropdown-menu-extend\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px'}\">" +
"<h4 >or select a future date here...</h4>" +
"<div class='col-lg-6'>" +
"<h5>Add a new function</h5>" +
"<button class='btn btn-default' ng-click='select(addDays(date, 30))'>30 days</button>" +
"</div>" +
"</div>" +
"</div>" +
"");
}])
.controller('ExampleCtrl', function ($scope) {
$scope.addDays = addDays;
function addDays(date, days) {
var newDate = date.setTime(date.getTime()+days * 86400000); //epoch date
var finalDate = new Date(newDate); //formatdate
console.log(finalDate);
return finalDate;
}
});
})();