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

Question

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

//父指令 Controller

父 Controller 只有一个用于子日期选择器的模型对象，$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 标记

带有一些参数的简单输入字段、一个日期选择器属性指令和带有父模型对象和关联键的 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 事件的日期选择器指令。除了在日期选择器更改时更新模型外，所有这些都很好用，所以我删除了它，因为它与如何在父级中设置模型值的问题无关，因此它可以在触发 watch 时重新呈现我的表结果。

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