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

Question

我正在使用 datetimepicker 指令，但在弄清楚如何更新 $modelValue 时遇到问题。

// 父指令控制器

父控制器只有一个模型对象供子日期选择器使用，它 $watches 用于更改。如果我直接输入日期可以正常工作，但 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 标记

简单的输入字段，带有一些参数、一个 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 更改时更新模型之外，所有这些都非常有效，因此我将其删除，因为它与如何在 parent 中设置模型值的问题无关，因此它可以在触发手表时重新呈现我的表格结果。

.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();
});