1

我是 Angular 的新手，并且在让 datepicker 指令正常工作时遇到了问题。http://jsfiddle.net/jGU95/9/上的 jsFiddle说明了一些我无法克服的问题。

表格非常简单：

<div ng-app="myApp" ng-controller="Ctrl">
    <br>
    Date 1
    <input type="text" datepicker1={{pickeropts}} ng-model="date1" /> {{date1 | date:MM/dd/yyyy}}
    <br>
    Date 2
    <input type="text" datepicker2={{pickeropts}} ng-model="date2" /> {{date2 | date:MM/dd/yyyy}}
    <br>
    Date 3
    <input type="text" datepicker1 data-date-format="{{format}}" ng-model="date3" /> {{date3 | date:MM/dd/yyyy}}        
</div>

datePicker1指令的原始日期渲染格式为错误的格式，实际日期选择器与日期（即选择日期1文本字段时，datePicker启动时，都以今天的日期而不是1975年的日期启动。从日期选择器中选择日期后，控件将按预期运行，包括以正确格式显示输出日期字符串。

这是 datepicker1 指令：

.directive('datepicker1', function(){
    return {
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
            var originalRender;
            var updateModel = function(ev) {
                return $scope.$apply(function() {
                    return controller.$setViewValue(ev.date);
                });
            };
            if (controller != null) {
                originalRender = controller.$render;
                controller.$render = function() {
                    originalRender();
                    return element.datepicker.ddate = controller.$viewValue;
                };
            }
            return attrs.$observe('datepicker1', function(value) {
                var options;
                options = {};
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof(value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel);
            });
        }
    };
})

datepicker2 对日期的原始渲染也有问题，并且也忽略了指定的格式选项。这似乎是由 controller.$render 函数中 datepicker 元素的实例化引起的，它发生在 attrs.$observe 函数之前。

这是 datepicker2 指令

.directive('datepicker2', function(){
    return {
        require: '?ngModel',
        link: function($scope, element, attrs, controller) {
            var updateModel = function(ev) {
                return $scope.$apply(function() {
                    return controller.$setViewValue(ev.date);
                });
            };
            if (controller !== null) {
                controller.$render = function() {
                    element.datepicker().data().datepicker.date = controller.$viewValue;
                    element.datepicker('setValue');
                    element.datepicker('update');
                    return controller.$viewValue;
                };
            }
            return attrs.$observe('datepicker2', function(value) {
                var options;
                options = {};
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof(value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel);
            });
        }
    };
});

最后，日期 3 的日期选择器不起作用，因为 $scope.format 值在发送到日期选择器之前未正确插入到字符串中。

请帮我弄清楚如何解决这些问题...

史蒂夫

4

1 回答 1

1

如果您还不熟悉它，我会看看 angularjs 的“隔离范围”概念。这为您的指令创造了一个新的范围，防止弄乱“全局”范围。它还允许绑定到您的属性值作为字符串、双向绑定或表达式。

官方文档，搜索“隔离”。你的眼睛可能会呆滞： http ://docs.angularjs.org/guide/directive

更好的解释： http: //onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

对于一些视频动作，请查看 egghead.io 上的 5 个简短而清晰的解释视频（从视频 nr 16 开始）。我会包含该链接，但我的 StackOverflow 声誉还不够高。

于 2013-05-17T08:07:59.000 回答