javascript - angular js中没有触发更改事件

Question

我是 angular js 的新手。我的应用程序中有一个 Bootstrap 日历。在更改月份时，需要触发更改事件。但无论我把它放在哪里，它都不会被触发。

请在下面找到代码段。

angular.element(document).ready(function() {
    console.log('page loading completed');
    $('#datetimepicker').datepicker({
        inline : true,
        sideBySide : true,
        useCurrent : false,
        firstDay : 1
    }); 
    $(".ui-datepicker-month").on('change',function() {
        alert("change event triggered")
    });
}); 

请帮助我。

谢谢，普纳

Answer 1

你应该在 DDO (指令定义对象) 中做这些事情。假设这是您的元素日期选择器:

<input type='text' data-datetimepicker="" id='datetimepicker'>  
<!---our directive------^^^^^^^^^^^^^^----------------------->

然后你可以像这样创建你的指令:

myApp.directive('datetimepicker', function() {
  return {
    restrict: 'A', //<---A for attribute
    link: function(scope, el, attrs) {
      el.find('input').datetimepicker().on('dp.change', function() {
          console.log("change event triggered");
        });
    }
  };
});

var myApp = angular.module('dateApp', []);
myApp.directive('datetimepicker', function() {
  return {
    restrict: 'A', //<---A for attribute
    link: function(scope, el, attrs) {
      el.find('input').datetimepicker().on('dp.change', function() {
          $(this).after("change event triggered");
        });
    }
  };
});

div {
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker-standalone.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div ng-app='dateApp'>
  <div id='datetimepicker' data-datetimepicker="">
    <input type='text'>
    <!---our directive------^^^^^^^^^^^^^^----------------------->
  </div>
</div>