javascript - ng-model 到我的服务器上的异步 xhr get/set 字段

Question

我正在使用 Angular 创建首选项页面。

基本上，我的服务器上的 mysql 表中有这个字段，我想将我的文本框建模为设置它并获取它的异步 xhr 请求。

这是一个我尝试组合起来模拟它的 jsfiddle，虽然没有异步，但因为我无法将其实现:

<div ng-controller="MyCtrl">
        {{prefs.delay}}
        Type a number: <input type="text" ng-model="prefs.delay"/>
</div>

和脚本:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $q, $timeout) {

    var getPref = function(prefName) {
        /*
        var deferredMain_getPref = $q.defer();

        sendAsyncMessage(['getPref', prefName], function(aPrefVal) {
                deferredMain_getPref.resolve(aPrefVal);
        });
        */
        return prefStore[prefName]
    };


    $scope.prefs = {
        delay: getPref('delay')
    };

    $scope.$watch('prefs.delay', function(newValue) {
        sendAsyncMessage(['setPref', 'delay', newValue]);
    });


}

// check global pref store value with:
// content.document.getElementsByTagName('iframe')[0].contentWindow.wrappedJSObject.prefStore
// faking stuff below for demo
var prefStore = {
    delay: 100
};
function sendAsyncMessage(arrOfFuncNameAndArgs, aCallback) {
    if (arrOfFuncNameAndArgs[0] == 'setPref') {
        prefStore[arrOfFuncNameAndArgs[1]] = arrOfFuncNameAndArgs[2];
    } else if (arrOfFuncNameAndArgs[0] == 'getPref') {
        setTimeout(function() {
            aCallback(prefStore.delay);
        }, 1000);
    }
}

JSFiddle Link - 演示

在这个 fiddle 中，我尝试使用 setTimeout 来伪造异步行为的延迟时间，但失败了，因此删除了异步行为以向您展示 Angular 的工作原理。如何引入带有超时的假异步？

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 => 500ms => 123

<小时/>

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