Question

我是棱角分明的新手。我的应用程序中有一个引导程序日历。在月份变化时，需要触发变更事件。但无论我把它放在哪里，它都不会被触发。

请找到下面的代码段。

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")
    });
});

请帮帮我。

谢谢， Poorna

Answer 1

您应该在DDO （指令定义对象）中执行此类操作。假设这是你的元素datepicker：

<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");
        });
    }
  };
});

＆＃13;

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");
        });
    }
  };
});

＆＃13;

div {
  position: relative;
}

＆＃13;

<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>

＆＃13;

更改事件未在角度js中触发

1 个答案: