datetimepicker（ブートストラップ）の変更後にフォームをダーティー状態（AngularJS）に設定する

Question

私のウェブページにBootstrap 3 DateTimePickerの入力があり、既存のデータが変更されると「編集」ボタンを有効にしようとしています。問題は、datatimepickerを使用してdatetimeを変更しても、フォームが「汚れている」とマークされていないため、ボタンが灰色で永久にグレー表示されることです。

<input type="submit" value="{{!myCtrl.thing.id ? 'Add' : 'Update'}}" class="btn btn-primary btn-sm" ng-disabled="myForm.$invalid || myForm.$pristine"> 

私はjQueryのを使用してdatatime変更イベントをキャッチする方法を知っているが、私はそれが汚れに状態です変更するには「あるmyForm」にアクセスする方法任意のアイデアを持っていません。

<form ng-submit="myCtrl.submit()" name="myForm" class="form-horizontal"> 
    <label class="col-md-2 control-label" for="date">Date:</label> 
     <div class="col-md-7"> 
      <div class="input-group date" id='datetimepicker'> 
       <input class="form-control" name="date" id="datetimepicker1" placeholder="select date"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker').datetimepicker({ 
       }); 
      }); 
      $("#datetimepicker").on("dp.change", function(e) { 
       //CODE TO set myForm to 'dirty' state. 
      }); 
     </script> 
</form> 

Answer 1

一般的な形式[formName].$setDirty()を使用して手動で設定できます。だからそれはあなたのためになります：myForm.$setDirty()。

Answer 2

なぜjQueryの処理にディレクティブを設定しようとしないのですか？

mainModule.directive('datePickerHandler', function() { 
return { 
    restrict: 'A', 
    link: function (scope, el) { 
     angular.element(document).ready(function() { 
      $(el).datetimepicker({}).on('dp.change', function(e) { 
       scope.myForm.$setDirty(); 
      }); 
     }); 
    } 
} 
}); 

次に、フォームのようなスコープディレクティブにアクセスできます。