在datetimepicker（bootstrap）更改后將表單設置為臟狀態（AngularJS）

Question

我的網頁上記錄了Bootstrap 3 DateTimePicker輸入，每當對現有數據進行更改時，我都試圖啟用“編輯”按鈕。 問題是使用datatimepicker更改日期時間不會將我的表單標記為“臟”，因此按鈕會永久變灰。

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

我知道如何使用JQuery捕獲數據時間更改事件，但是我不知道如何訪問“ 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();
            });
        });
    }
}
});

然后，您可以訪問范圍指令（如form）。