Question

我很接近，但仍然无法让它发挥作用。

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

只要我在Angular中添加一个指令来设置它来调用jQuery UI datepicker函数，我就会收到以下错误，表明它没有正确加载jQueryUI脚本库：

TypeError：Object [object Object]没有方法'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 Range Picker Date Range Picker套餐时遇到了同样的问题。这令人沮丧！问题（我认为）是Angular的ng-model侦听“输入”更改以触发事件，因此不会接受jQuery触发的事件。

我找到的方法是使用jQuery .trigger() event强制手动触发要更新的元素的输入事件。

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

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');
    }
},

这会强制Angular“看到”更改，然后更新ng-model。可能会有更优雅的方式（因为我是一个Angular新手），但我知道这对我有用。

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)
            {}
        });
    };

});

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

将Umbraco属性编辑器输入设置为jQueryUI Datepicker

2 个答案: