Angular.js指令元素的默认值

Default values for an Angular.js directive element

本文关键字：默认值 元素 指令 js Angular      更新时间：2023-09-26

我的问题是我需要创建一个指令，从控制器范围中获取它的元素，或者如果它没有在范围中定义，则从DOM元素中获取它。
这是我的指令:

rmsUtils.directive('rmsDateRange', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, controller) {
            var date = {
                'start' : element.find('[rms-date-range-field=start]').val(),
                'end' : element.find('[rms-date-range-field=end]').val(),
            };
            element.datepicker({
                format: "yyyy",
                startView: 1,
                minViewMode: 2,
                autoclose: true
            }).on('changeDate', function(e){
                var year = e.date.getFullYear(),
                id = e.target.getAttribute('rms-date-range-field');
                date[id] = String(year);
                scope.$apply(read);
            });
            function read() {
                controller.$setViewValue(date);
            }
            read();
        }
    };
}]);

元素看起来像:

<div class="input-group input-daterange input-group-sm" rms-date-range id="id_birth_date_range" name="birth_date_range" ng-model="filters.birth_date_range" ng-show="showCustomBirthYears()">
    <input class="form-control input-xs" type="text" rms-date-range-field="start" value="1980">
    <span class="input-group-addon">to</span>
    <input class="form-control input-xs" type="text" rms-date-range-field="end" value="1995">
</div>

控制器是一个简单的ctrl键来定义$scope.filters.birth_date_range = {start: 2000, end: 2010}

值被正确分配，但是当我的指令被初始化时，它将它们重新分配给1980,1995。在我的指令link()中，在调用read()函数之前，controller.$viewValue和controller.$modelValue是undefined。

任何帮助都是非常感谢的:)

它正在被重置，因为在您的链接函数中，您将日期变量设置为从开始和结束输入元素中获取的值。然后在读取函数中更新视图值，视图值又更新模型值，即作用域变量。因此，一旦链接函数调用read，作用域变量就会更新为文本框中的内容。

如果你能进一步说明你在做什么，我可以更具体地帮助你。

HTH

相关文章：