javascript - 如何在 Bootstrap 日期时间选择器更改后触发 Angular Controller 功能

Question

我想在使用日期时间选择器更改输入后触发 Angular Controller 内的函数。但我该如何实现呢？这是到目前为止我的代码:

HTML:

<div class="col-md-6">
   <div class="input-group">
       <input id="fromDateFilter"
          type="hidden"
          class="input-sm form-control"
          placeholder="{{trans('mission/mission.fields.from') }}"
          name="from"
       />
       <input type="text" class="form-control" id="datepickerFromFilter" />
       <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"></span>
       </span>
    </div>
</div>
<div class="col-md-6">
    <div class="input-group">
        <input id="toDateFilter"
            type="hidden"
            class="input-sm form-control"
            placeholder="{{trans('mission/mission.fields.to') }}"
            name="to"
         />
         <input type="text" class="form-control" id="datepickerToFilter" />
         <span class="input-group-addon">
             <span class="glyphicon glyphicon-calendar"></span>
         </span>
     </div>
</div>

Jquery:

$( document ).ready(function() {

    var fromFilter    = $('#fromDateFilter').val(),
    toFilter      = $('#toDateFilter').val();

    var fromDateFilter    = new Date(Date.parse(fromFilter.replace('-','/','g'))),
        toDateFilter      = new Date(Date.parse(toFilter.replace('-','/','g')));

    $('#datepickerFromFilter').datetimepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: 100
                });
            }, 0);
        },
        dateFormat: "dd.mm.yy",
        timeFormat: "HH:mm:ss",
        altFormat: "yy-mm-dd",
        altTimeFormat: "HH:mm:ss",
        altFieldTimeOnly: false,
        showSecond: false,
        stepMinute: 15,
        altField: "#fromDateFilter"
    }).datetimepicker("setDate", fromDateFilter);


    $('#datepickerToFilter').datetimepicker({
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: 100
                });
            }, 0);
        },
        dateFormat: "dd.mm.yy",
        timeFormat: "HH:mm:ss",
        altFormat: "yy-mm-dd",
        altTimeFormat: "HH:mm:ss",
        altFieldTimeOnly: false,
        showSecond: false,
        stepMinute: 15,
        altField: "#toDateFilter"
    }).datetimepicker("setDate", toDateFilter);
});

AngularJS:

app.controller('missionController', function($scope, $http, $attrs) {

    $scope.apiUrl = '/ajax/mission';
    $scope.missions = [];

    $scope.searchActualMissions = function(from, to) {
        $http.post($scope.apiUrl+'/actual', {
            from: from,
            to: to
        }).success(function(data, status, headers, config) {
            $scope.missions = data;
        });
    };
});

Answer 1

我强烈建议您研究ui-bootstrap，它是具有 Bootstrap 函数的 Angular Directive(指令)的集合，这样您就可以以“Angular 方式”完成所有 Bootstrap 的工作。

https://angular-ui.github.io/bootstrap/