Question

我从时间选择器中选择的值没有更新，但是当我删除时间选择器并使用普通文本框更新时，时间选择器或我的代码有什么问题？

<div  data-ng-repeat="mondayBhr in businessHour.mon" class="form-group">
            <label class="col-sm-1 label-group" for="mondayStoreOpentimingsedit">Open</label>
            <div class="form-group">
                <div class="bootstrap-timepicker">
                    <input  id="mondayStoreOpentimingsedit" name="mondayStoreOpentimingsedit" ng-model="mondayBhr.store[0].open"  style="max-height:25px" class="col-md-2"  />
                    <script>
                        $('#mondayStoreOpentimingsedit').timepicker({
                            showMinutes:true,
                            showMeridian:false,
                            pick12HourFormat: true
                        }).next().on(ace.click_event, function(){
                            $(this).prev().focus();
                        });
                        </script>
                </div>
            </div>
        </div>

非常感谢提前帮助!!

Answer 1

使用jquery插件时始终使用指令来交互AngularJS

<强>标记

<input  id="mondayStoreOpentimingsedit" time-picker name="mondayStoreOpentimingsedit" 
ng-model="mondayBhr.store[0].open" style="max-height:25px" class="col-md-2"  />

<强>指令

app.directive('timePicker', function() {
    return {
        restrict: 'A',
        reuqire: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.timepicker({
                showMinutes: true,
                showMeridian: false,
                pick12HourFormat: true,
                change: function(time) {
                    //need to run digest cycle for applying bindings
                    scope.$apply(function() {
                        ngModel.$setViewValue(time);
                    });

                }
            }).next().on(ace.click_event, function() {
                $(this).prev().focus();
            });
        }
    }
});

使用Bootstrap Time Picker时，不会更新data-ng-model值

1 个答案: