angularjs - example - promise angular 6




Angular JS: comment lier aux promesses (2)

J'essaie de lier une promesse à un point de vue. Je ne sais pas si vous pouvez le faire directement, mais c'est ce que je tente de faire. Des idées de ce que je fais mal?

Note: la source est un peu artificielle avec le timeout et utilise des données statiques, mais c'est pour rendre le code plus facile à diagnostiquer.

EDIT: JSFiddle Page: http://jsfiddle.net/YQwaf/27/

EDIT: SOLUTION: Il s'est avéré que vous pouvez lier directement les promesses. J'ai eu deux problèmes avec mon code original:

  1. L'utilisation de setTimeout () au lieu de $ timeout de angular était un problème. Angular ne sait pas qu'il doit actualiser l'interface utilisateur lorsque le délai d'attente est déclenché (vous pouvez résoudre cela avec $ scope. $ Apply à l'intérieur de setTimeout, ou vous pouvez simplement utiliser $ timeout)
  2. La liaison à une fonction qui a renvoyé une promesse était un problème. Si on l'appelle une deuxième fois, cela fait encore une autre promesse. Mieux vaut définir une variable de portée à la promesse et créer une nouvelle promesse seulement si nécessaire. (Dans mon cas, cela appelait $ scope. $ Watch sur le code pays)

HTML:

<div ng:controller="addressValidationController">
    Region Code <select ng:model="regionCode" ng:options="r.code as r.name for r in getRegions()"/>
    Country Code<select ng:model="countryCode"><option value="US">United States</option><option value="CA">Canada</option></select>
</div>

JS:

function addressValidationController($scope, $q) {
    var regions = {
        US: [{code: 'WI',name: 'Wisconsin'}, {code: 'MN',name: 'Minnesota'}], 
        CA: [{code: 'ON',name: 'Ontario'}]
    };
    $scope.getRegions = function () {
        var deferred = $q.defer();
        setTimeout(function () {
            var countryRegions = regions[$scope.countryCode];
            console.log(countryRegions);
            if(countryRegions === undefined) {
                deferred.resolve([]);
            } else {
                deferred.resolve(countryRegions);
            }
        }, 1000);
        return deferred.promise;
    };
}

ATTENTION : cette réponse était précise quand elle a été écrite, mais dès le 1.2 le moteur de template Angular ne gère plus les promesses de façon transparente! - @Malvolio

Oui, le moteur de template (et les expressions) gère les promesses de manière transparente, mais j'attribuerais la promesse à une propriété scope dans le contrôleur et je n'appellerai pas toujours une fonction qui retourne une nouvelle promesse (je pense que c'est votre problème la promesse est retournée à chaque fois).

JSFiddle: http://jsfiddle.net/YQwaf/36/

HTML:

<div ng:controller="addressValidationController">
    Region Code <select ng:model="regionCode" ng:options="r.code as r.name for r in regions"/>
    Country Code<select ng:model="countryCode"><option value="US">United States</option><option value="CA">Canada</option></select>
</div>

JS:

function addressValidationController($scope, $q, $timeout) {
    var regions = {
        US: [{
            code: 'WI',
            name: 'Wisconsin'},
        {
            code: 'MN',
            name: 'Minnesota'}],
        CA: [{
            code: 'ON',
            name: 'Ontario'}]
    };

    function getRegions(countryCode) {
        console.log('getRegions: ' + countryCode);
        var deferred = $q.defer();
        $timeout(function() {
            var countryRegions = regions[countryCode];
            if (countryRegions === undefined) {
                console.log('resolve empty');
                deferred.resolve([]);
            } else {
                console.log('resolve');
                deferred.resolve(countryRegions);
            }
        }, 1000);
        return deferred.promise;
    };

    $scope.regions = [];

    // Manage country changes:
    $scope.$watch('countryCode', function(countryCode) {
        if (angular.isDefined(countryCode)) {
            $scope.regions = getRegions(countryCode);
        }
        else {
            $scope.regions = [];
        }
    });
}​

À partir de Angular 1.3 - $parseProvider.unwrapPromises(true) ne fonctionnera plus .

Au lieu de cela, vous devriez déballer les promesses directement:

myApiMethod().then(function(value){
    $scope.item = value; 
});

Notez que le déballage de la promesse fonctionnera toujours avec ngResource comme d'habitude.







promise