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()，绑定到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()中利用请求。到达那一点时，只需注入$http等服务并相应地建模......

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

JSFiddle Link - 工作演示 - 输入1 =＆gt; 500ms =＆gt; 123

如果您希望最初阻止键控值，我的假设是错误的，您也可以绑定到ng-change并删除$event.preventDefault。如果您选择了此选项，则会看到您的初始输入值，然后按预期更改（获取/设置）。

将ng-model绑定到get和set的异步函数

1 个答案: