angularjs - jQuery UI Spinner不会按 Angular 更新ng-model

Question

使用jquery-ui微调框时，Angular的ng模型不会更新。

这是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的更新。

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

伪指令作为属性放置在您要变成微调器的输入元素上；和

伪指令配置微调器，以便spin事件监听器使用ngModel事件值调用$setViewValue Controller 的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 正是用于这种情况:

This method should be called when an input directive wants to change the view value; typically, this is done from within a DOM event handler.

这是 a working demo的链接。

如果上面提供的演示链接由于某种原因而消失，那么这里是完整的示例脚本:

(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>