javascript - 将 ng-model 绑定(bind)到 get 和 set 的异步函数

Question

我之前问过一个问题，但我试图解决这个问题使它变得非常困惑，所以在这里我将在没有尝试解决它的情况下展示它。 (我的老话题在这里:ng-model to async xhr get/set field on my server)

我在浏览器插件中使用 angular。我的目标是我有文本框。我只想允许在其中输入数字(我使用 ng-pattern="^\d+$/|/[^\s*]/" 完成)。我想将它 ng-model 成一个异步获取值并异步设置值的函数。

这些是异步设置和获取函数:

getBrowserPref('pref-name-here', function(aPrefValue) { })

setBrowserPref('pref-name-here', 'value-to-set-to');

我无法通过简单的方式解决这个问题，有什么想法吗？在我的解决方案中，我必须做一些奇怪的事情，比如调用 $scope.$digest

Answer 1

您的示例有点难以理解，因此我制作了一个通用示例，希望可以将其融入您的工作副本中。这是我相信你追求的黑暗中的一枪。首先，ng-pattern不会阻止输入，只会触发验证。相反，开始使用 input[number] .我还猜测您希望看到您在 <input /> 中设置的手动值，而不是键控条目。为此，关闭 $event.preventDefault() , 绑定(bind)到 ng-keydown .这是一个完整的工作示例，我包装在一个名为 async 的装饰器指令中.观察以下...

<input type="number" async ng-keydown="sync($event)" ng-model="model" />

---

.directive('async', ['myService', function(myService) {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel) {

            scope.sync = function($event) {
                $event.preventDefault();

                myService.getValue().then(function(response) {
                    myService.setValue(response).then(function(final) { 
                        ngModel.$setViewValue(final)
                        ngModel.$render();
                    });
                });
            }
        }
    }
}]);

在哪里myService是利用 $q 的模拟服务和 $timeout模拟异步行为...

.factory('myService', ['$q', '$timeout', function($q, $timeout) {

    function getValue () {
        var deferred = $q.defer();

        $timeout(function () {
            deferred.resolve(123);
        }, 250);

        return deferred.promise;
    }

    function setValue(value) {
        var deferred = $q.defer();

        $timeout(function () {
            deferred.resolve(value);
        }, 250);

        return deferred.promise;
    }

    return {
        getValue: getValue,
        setValue: setValue
    }
}]);

在哪里123 - 样本值 - 通过 getValue 异步菊花链和 setValue功能。结果来自 getValue也作为参数传递给 setValue如果在最终调用 ngModel.$setViewValue 之前需要进一步操作和 ngModel.$render() .此外，您的目标是可能利用 getValue() 中的请求.当达到这一点时，只需注入(inject)一个服务，如 $http并相应地建模......

function getValue () {
    return $http.get('/endpoint');
}

JSFiddle Link - 工作演示 - 输入 1 => 500 毫秒 => 123

---

如果我的假设是错误的，您最初希望阻止键值，您可以选择绑定(bind)到 ng-change并删除 $event.preventDefault .如果您选择此项，您将看到您的初始键入值，该值随后将按预期更改(获取/设置)。