JQuery UI Spinner没有以角度更新ng-model

Question

使用jquery-ui微调器时,Angular的ng-model不会更新.

这是jsfiddle http://jsfiddle.net/gCzg7/1/

<div ng-app>

  <div ng-controller="SpinnerCtrl">
    <input type="text" id="spinner" ng-model="spinner"/><br/>
    Value: {{spinner}}
  </div>
</div>

<script>
    $('#spinner').spinner({});
</script>

如果您通过键入更新文本框它工作正常(您可以看到文本更改).但如果使用向上或向下箭头,模型不会改变.

Answer 1

迟到的回答,但是...有一个非常简单和干净的"Angular方式",以确保微调器的spin事件处理更新ngModel而不诉诸$apply(尤其是不诉诸$parse或仿真).

您需要做的就是定义一个具有两个特征的非常小的指令:

1. 该指令作为要转换为微调器的输入元素的属性放置; 和

2. 该指令配置微调器,以便spin事件监听ngModel器$setViewValue使用spin事件值调用控制器的方法.

这是一个明确,微小荣耀的指令:

function jqSpinner() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, c) {
            element.spinner({
                spin: function (event, ui) {
                    c.$setViewValue(ui.value);
                }
            });
        }
    };
};

请注意,这$setViewValue适用于这种情况:

当输入指令想要更改视图值时,应该调用此方法; 通常,这是在DOM事件处理程序中完成的.

这是一个工作演示的链接.

如果上面提供的演示链接由于某种原因而死亡,这里是完整的示例脚本:

(function () {
    'use strict';

    angular.module('ExampleApp', [])
        .controller('ExampleController', ExampleController)
        .directive('jqSpinner', jqSpinner);

    function ExampleController() {
        var c = this;
        c.exampleValue = 123;
    };

    function jqSpinner() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, c) {
                element.spinner({
                    spin: function (event, ui) {
                        c.$setViewValue(ui.value);
                    }
                });
            }
        };
    };
})();

最小的示例模板:

<div ng-app="ExampleApp" ng-controller="ExampleController as c">
    <input jq-spinner ng-model="c.exampleValue" />
    <p>{{c.exampleValue}}</p>
</div>

Answer 2

Charminbear 关于需要 $scope.$apply() 的说法是正确的。然而，这种方法存在一些问题。仅当旋转器的焦点被移除时，才会触发“更改”事件。因此，您必须单击微调器，然后单击其他位置。每次点击都会触发“spin”事件。此外，在调用 $scope.$apply() 之前需要更新模型。

这是一个工作的 jsfiddle http://jsfiddle.net/3PVdE/

$timeout(function () {
        $('#spinner').spinner({
            spin: function (event, ui) {
                var mdlAttr = $(this).attr('ng-model').split(".");

                if (mdlAttr.length > 1) {

                    var objAttr = mdlAttr[mdlAttr.length - 1];
                    var s = $scope[mdlAttr[0]];

                    for (var i = 0; i < mdlAttr.length - 2; i++) {
                        s = s[mdlAttr[i]];
                    }

                    s[objAttr] = ui.value;
                } else {
                    $scope[mdlAttr[0]] = ui.value;
                }

                $scope.$apply();
            }
        }, 0);
    });

这是类似的问题和方法/sf/answers/851729651/