Question

我正在使用datetimepicker指令，我在解决如何更新$ modelValue时遇到了问题。

//父指令控制器

父控制器只有一个用于子日期选择器的模型对象，$ watch监视更改。如果我直接键入日期，则工作正常，但是datepicker设置输入值，因此必须点击其onchange事件。

controller: ['$scope', function( $scope ) {

        // Filter Date Range Model
        // NOTE: just sets the model object, possible values dateFrom: 'datestr' and dateTo: 'datestr'
        $scope.filterDateRange = {}; 

        /**
         * Watch for changes in the date picker model, and invoke
         * changes in the list results
         */
        $scope.$watch( function() {

            return $scope.filterDateRange;

        }, function( newDateRange, oldDateRange ) {

             // NOTE: never invoked except when the input is typed into directly
             console.log( "filterDateRange = ", $scope.filterDateRange )

             ... verbose code to update table results

        }, true);
}]

// DateRangePicker Markup

带有一些参数的简单输入字段，一个datepicker属性指令，以及使用父模型对象和关联键设置的ngModel。

<div class="form-group">
    <label for="dateFrom" class="control-label">Date From</label>
    <div class="input-group date">
        <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
        </span>

        <input type="text" 
               class="form-control" 
               id="dateFrom" 
               name="dateFrom"  
               scope='min'
               match="dateTo"
               ng-model="filterDateRange['dateFrom']" // model and key
               date-range-picker>

        <span class="input-group-addon"
              ng-click="clearDate( 'dateFrom' )">
            <span class="fa fa-times"></span>
        </span>
    </div>
</div>

// DateRangePicker指令

日期选择器指令，用于创建日期选择器，向服务注册，以及监视内部change.dp事件。除了在datepicker更改上更新模型之外，所有这些都很有效，所以我删除了它，因为它与如何在父级中设置模型值无关，因此它可以在触发监视时重新呈现我的表结果。

.directive('dateRangePicker', ['DateRangeService', 
    function( DateRangeService ) {

        return {
            restrict: 'AE',
            scope: {},
            require: 'ngModel',
            link: function( $scope, $element, $attrs, ngModelCtrl) {

                ... verbose code setting up datepicker

                // Watch for any changes to the datepicker date
                $element.on( 'change.dp', function( e ) {

                    ... verbose code handling datepicker response to event

                    // Set model value updating parent object???
                    // NOTE: at this point the input has a date string in it ie. 'Nov 6, 2014'
                    // Watch in parent not triggered since model not updated...

                    console.log($element.val()); // input value of 'Nov 6, 2014' or equiv

                    // ngModelCtrl.$setViewValue($element.val())
                    ngModelCtrl.$modelValue = $element.val();
                    // ngModelCtrl.$render();
                    // $scope.$apply();
                    // ngModelCtrl.$setValidity('match', $element.val());
                    // ngModelCtrl.$commitViewValue()

                });
            }
        };
}]);

Answer 1

不能直接设置$modelValue，它不会传播回实际模型。相反，请使用$setViewValue，amongst other things, update $modelValue for you。将其包裹在申请中，因为$setViewValue不会自动触发摘要。

$scope.$apply(function () {
    ngModelCtrl.$setViewValue($element.val());
    ngModelCtrl.$render();
});

在自定义指令上使用ngModelController来更改父指令中的模型

1 个答案: