ui.bootstrap.tpls覆蓋模板/ datepicker/popup.html模板

Question

我創建了一個新的模板/ datepicker/popup.html模板，它在ui.bootstrap.tpls之後加載。

我在努力的是在新模板中通過ng-click調用函數。我不要想更新ui.bootstrap.tpls文件。我試過這兩種不同的方式：

1）較不理想：使用從ui.bootstrap.tpls指令datepickerPopup中已經選擇的功能。我可以通過轉換爲.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>" + 

Plunker：

http://plnkr.co/edit/Klbek5SpOGIA4FXTmlFX?p=preview

Answer 1

我花更多的時間與此修補今天與解決我自己的問題上來。

當你覆蓋模板add 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; 
    } 
}); 

})();