javascript - jQuery UI 中的更改未反射(reflect)在 Angular 模型上

Question

我有一个指令中的表单。它包含 2 个选择下拉菜单(jQuery 样式)和一个 jQuery UI slider ，因此它们的主题一致。

下拉列表 1 在生成时填充，就像它们来的一样简单。当下拉列表 1 的值发生变化时，下拉列表 2 会被填充。发生这种情况是因为下拉列表 1 附加了 ng-change="refreshModels()"。这就像一个魅力。

但是， slider 问题更多。为了获得 slider 的值，我需要有一个隐藏的输入字段，每次 slider 位置发生变化时，它都会填充 $.val() 。值会正确更新，甚至会触发更改事件(当我将 onchange="console.log('I changed')" 放入隐藏字段时，我会很好地记录所有内容)。

但是，附加到同一个隐藏字段的 ng-model 永远不会更新。与 onchange 不同，ng-change 永远不会触发。

所以我asked around并尝试在 jQuery slider 的幻灯片处理程序中执行此操作:

angular.element($(this)).scope().$apply(); 

但是没有骰子。什么都没发生。尝试调用一个我知道存在于该指令中的模型，如下所示:

angular.element($(this)).scope().model_that_definitely_exists; 

产量未定义。尝试访问指令的父 Controller 中的模型也会产生未定义的结果。

为什么通过用户直接在字段上输入以外的方式更改 Angular 寄存器会如此困难？我做错了什么？

附言我尝试将 ng-mouseup 放在成为 slider 的元素上，并且可以很好地调用刷新方法 - 但忽略了隐藏字段。对于 Angular，这些仍然是未定义的，尽管实际上，它们是有值的—— slider 将它们放在那里。

附言我还尝试将 $watch 放在我希望在移动 slider 后更改的模型上，什么也没有。模型的值永远不会改变，即使字段的 val 实际上改变了。

P.P.P.S.我刚刚发现这种可悲的状况。 https://github.com/angular-ui/angular-ui/issues/252如果有人有解决方法，我将不胜感激。

Answer 1

我最近为 jqueryUiSlider 写了一个自定义指令。

您可以在 GitHub ( https://github.com/jvandemo/CoconutJS/blob/master/src/jquery-ui/directives/ccnutJqueryUiSlider.js ) 上查看它，但我会在此处发布以供引用:

angular.module('ccnut.jquery-ui.directives')
    .directive('ccnutJqueryUiSlider', ['ccnut.config', 'logger', function (ccnutConfig, logger) {
        return {
            restrict: 'AC',
            require: 'ngModel',
            link: function (scope, iElement, iAttrs, ngModelController) {

                if (!window.$ || !window.$.fn || !window.$.fn.datepicker) {
                    return logger.warn('ccnutJqueryUiSlider directive skipped: slider function from jQuery UI library not available');
                }

                // Get options
                var options = angular.extend({}, scope.$eval(iAttrs.ccnutJqueryUiSlider));

                // Initialize slider
                iElement.slider(options);

                // Update model on slide event
                iElement.on('slide', function (event, ui) {
                    ngModelController.$setViewValue(ui.value);
                    scope.$apply();
                });

                // Update slider when view needs to be updated
                ngModelController.$render = function () {
                    var value = (ngModelController.$viewValue || 0);
                    iElement.slider('value', value);
                };

            }
        };
    }]);

此处，ngModelController 用于使用 ng-model="yourModelName" 将 slider 的值“绑定(bind)”到分配给指令的模型。

用法很简单:

<div ng-model="model" ccnut-jquery-ui-slider="{min:1, max:5}"></div>

这将创建一个 slider 并将值存储在 ng-model 指定的模型中。

更新模型时， slider 也会滑动到新值。

您可以在 https://github.com/jvandemo/CoconutJS/blob/master/src/jquery-ui/directives/ccnutJqueryUiSlider.js 的源代码注释中阅读一些额外的文档

希望对您有所帮助!