将UMBRACO属性编辑器输入到JQueryui DatePicker

Question

我很接近，但仍然无法完全工作。

我有一个新的自定义属性编辑器，该编辑器正在正确加载，并且正在执行几乎所有预期的一切，直到我尝试将文本字段设置为jQuery UI元素。

一旦我添加了Angular中的指令，以将其设置为调用JQuery UI DatePicker函数，我会收到以下错误，表明它尚未正确加载JQueryUI脚本库：

typeError：对象[对象]没有方法'datepicker'

麻烦是，我看不到应该在哪里添加它，因为（至少在我看来）似乎没有区别。这是完整的代码：

function MultipleDatePickerController($scope, assetsService) {
    //tell the assetsService to load the markdown.editor libs from the markdown editors
    //plugin folder
    //assetsService
    //    .load([
    //        "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"
    //    ])
    //    .then(function () {
    //        //this function will execute when all dependencies have loaded            
    //    });
    //load the seperat css for the editor to avoid it blocking our js loading
    assetsService.loadCss("/css/jquery-ui.custom.min.css");
    if (!$scope.model.value) {
        $scope.model.value = [];
    }
    //add any fields that there isn't values for
    //if ($scope.model.config.min > 0) {
    if ($scope.model.value.length > 0) {
        for (var i = 0; i < $scope.model.value.length; i++) {
            if ((i + 1) > $scope.model.value.length) {
                $scope.model.value.push({ value: "" });
            }
        }
    }
    $scope.add = function () {
        //if ($scope.model.config.max <= 0 || $scope.model.value.length < $scope.model.config.max) {
        if ($scope.model.value.length <= 52) {
            $scope.model.value.push({ value: "" });
        }
    };
    $scope.remove = function (index) {
        var remainder = [];
        for (var x = 0; x < $scope.model.value.length; x++) {
            if (x !== index) {
                remainder.push($scope.model.value[x]);
            }
        }
        $scope.model.value = remainder;
    };
}
var datePicker = angular.module("umbraco").controller("AcuIT.MultidateController", MultipleDatePickerController);
datePicker.directive('jqdatepicker', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            $(function () {
                element.datepicker({
                    dateFormat: 'dd/mm/yy',
                    onSelect: function (date) {
                        scope.$apply(function () {
                            ngModelCtrl.$setViewValue(date);
                        });
                    }
                });
            });
        }
    }
});

Answer 1

我在适应umbraco 7的日期范围选择器软件包的jQuery Date范围选择器时遇到了同样的问题。这很令人沮丧！问题（我认为）是，Angular的ng-model听"输入"更改以触发事件，因此不会在jQuery触发的事件上拾取。

我发现的解决方法是强制您希望使用jQuery的.trigger（）事件手动更新元素的输入事件。

例如，我使用的日期选择器更改日期时具有此代码：

updateInputText: function () {
    if (this.element.is('input')) {
        this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format));
    }
},

我只是对其进行了调整以通过将this.element.trigger('input')添加到代码块中强制输入触发器，因此它现在读取：

updateInputText: function () {
    if (this.element.is('input')) {
        this.element.val(this.startDate.format(this.format) + this.separator + this.endDate.format(this.format));
        this.element.trigger('input');
    }
},

这会迫使角度"查看"更改，然后更新ng-model。很可能有一种更优雅的方式（因为我是一个角度的新手），但我知道这对我有用。

Answer 2

得到了它。这可能有点黑客，但是简单有效，因此这是一场胜利。

AssetsService调用是关键，我将代码放入递延的.then语句中，以在任何具有" JQDP" CSS类的项目上调用Jqueryui的datepicker：

//tell the assetsService to load the markdown.editor libs from the markdown editors
//plugin folder
assetsService
    .load([
        "/App_Plugins/Multidate/jquery-ui.min.js"
    ])
    .then(function () {
        //this function will execute when all dependencies have loaded    
        $('.jqdp').datepicker({ dateFormat: 'dd/mm/yy' });
    });

然后我去了我的观点：

    <input type="text" jqdatepicker name="item_{{$index}}" ng-model="item.value" class="jqdp" id="dp-{{model.alias}}-{{$index}}" />

最后，我添加了一个指令，以确保动态添加的项目还显示一个datepicker：

datePicker.directive('jqdatepicker', function () {
    return function (scope, element, attrs) {
        scope.$watch("jqdatepicker", function () {
            try{
                $(element).datepicker({ dateFormat: 'dd/mm/yy' });
            }
            catch(e)
            {}
        });
    };
});

正如我所说，这可能有点骇客，但它取得了正确的结果，似乎是一个简单的解决方案。