2

我创建了一个在 ui.bootstrap.tpls 之后加载的新模板/datepicker/popup.html 模板。

我正在努力的是从新模板中的 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>" +

柱塞：

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

4

1 回答 1

2

我今天花了更多时间来修补这个问题，并想出了一个解决我自己问题的方法。

当您覆盖模板时，将 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;
  }
});

})();
于 2015-04-06T22:11:30.840 回答