ejemplos - Angularjs promete no vinculante para la plantilla en 1.2

angularjs pdf

Question

Después de actualizar a 1.2, las promesas devueltas por mis servicios se comportan de manera diferente ... Servicio simple myDates:

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

            $http.get(aGoodURL).
                 success(function (data, status, headers, config) {
                     deferred.resolve(data);  // we get to here fine.
            })......

En una versión anterior, solo podía hacer, en mi controlador:

$scope.theDates = myDates.getDates();

y las promesas devueltas de getDates podrían vincularse directamente a un elemento Seleccionar. Ahora esto no funciona y me veo obligado a proporcionar una devolución de llamada sobre la promesa en mi controlador o los datos no se unirán:

$scope.theDates = matchDates.getDates();
$scope.theDates.then(function (data) {
      $scope.theDates = data;  // this wasn''t necessary in the past

Los documentos aún dicen:

Las promesas de $ q son reconocidas por el motor de plantillas en angular, lo que significa que en las plantillas puede tratar las promesas adjuntas a un alcance como si fueran los valores resultantes.

Ellos (promesas) estaban trabajando en versiones anteriores de Angular, pero en el enlace automático 1.2 RC3 falla en todos mis servicios simples ... cualquier idea sobre lo que podría estar haciendo mal.

Answer 1

Como @Nenad avisos, las promesas ya no se desreferencian automáticamente. Esta es una de las decisiones más extrañas que he visto desde que elimina silenciosamente una función en la que confié (y ese fue uno de los puntos de venta únicos de angular para mí, menos es más). Así que me tomó bastante tiempo resolver esto. Sobre todo porque el marco $ resource parece funcionar bien. Además de todo esto, este es también un candidato de lanzamiento. Si realmente tuvieran que desaprobar esto (los argumentos suenan muy débiles) al menos podrían haber dado un período de gracia en el que hubo advertencias antes de silenciarlo silenciosamente. Aunque generalmente está muy impresionado con angular, este es un gran inconveniente. No me sorprendería si esto realmente se revierte, aunque parece que hay relativamente poca protesta hasta el momento.

De todas formas. ¿Cuáles son las soluciones?

• Siempre use then () y asigne $ scope en el método then

  function Ctrl($scope) {
     foo().then( function(d) { $scope.d = d; });
  )

• llama el valor a través de una función desenvolver. Esta función devuelve un campo en la promesa y establece este campo a través del método then. Por lo tanto, no estará definido mientras la promesa no se resuelva.

  $rootScope.unwrap = function (v) {
    if (v && v.then) {
      var p = v;
      if (!(''$$v'' in v)) {
        p.$$v = undefined;
        p.then(function(val) { p.$$v = val; });
      }
      v = v.$$v;
    }
    return v;
  };

  Ahora puedes llamarlo:

  Hello {{ unwrap(world) }}.

  Esto es de http://plnkr.co/edit/Fn7z3g?p=preview que no tiene un nombre asociado.

• Establezca $parseProvider.unwrapPromises(true) y en vivo con los mensajes, que puede desactivar con $parseProvider.logPromiseWarnings(false) pero es mejor tener en cuenta que pueden eliminar la funcionalidad en la siguiente versión.

Suspiro, 40 años Smalltalk tenía el mensaje become que permitía cambiar referencias de objeto. Promesas como podrían haber sido ...

ACTUALIZAR:

Después de cambiar mi aplicación, encontré un patrón general que funcionó bastante bien.

Suponiendo que necesito el objeto ''x'' y hay alguna forma de obtener este objeto de forma remota. Primero verificaré un caché para ''x''. Si hay un objeto, lo devuelvo. Si no existe tal objeto, creo un objeto vacío real. Desafortunadamente, esto requiere que sepas si se tratará de una matriz o un hash / objeto. Puse este objeto en el caché para que las futuras llamadas puedan usarlo. Entonces comienzo la llamada remota y en la devolución de llamada copio los datos obtenidos del sistema remoto en el objeto creado. La memoria caché garantiza que las llamadas repetidas al método get no creen muchas llamadas remotas para el mismo objeto.

 function getX() {
   var x = cache.get(''x'');
   if ( x == undefined) {
      cache.put(''x'', x={});
      remote.getX().then( function(d) { angular.copy(d,x); } );
   }
   return x;
 }

Otra alternativa más es proporcionar el método get con el destino del objeto:

 function getX(scope,name) {
   remote.getX().then( function(d) { 
       scope[name] = d;
   } );
 }       

Answer 2

Estas fueron algunas buenas respuestas, y me ayudaron a encontrar mi problema cuando actualicé angular y mi desenvolvimiento automático de promesas dejó de funcionar.

A riesgo de ser redundante con Peter Kriens, he encontrado que este patrón funciona para mí (este es un simple ejemplo de simplemente poner una serie de citas de personas famosas en una página).

Mi controlador:

angular.module(''myModuleName'').controller(''welcomeController'',
function ($scope, myDataServiceUsingResourceOrHttp) {

    myDataServiceUsingResourceOrHttp.getQuotes(3).then(function (quotes) { $scope.quotes = quotes; });
}
);

Mi página:

...
<div class="main-content" ng-controller="welcomeController">
...
<div class="widget-main">
    <div class="row" ng-repeat="quote in quotes">
        <div class="col-xs-12">
            <blockquote class="pull-right">
                <p>{{quote.text}}</p>
                <small>{{quote.source}}</small>
            </blockquote>
                </div>
    </div>
</div>
...

Answer 3

Hay cambios en 1.2.0-rc3, incluido uno que usted mencionó:

AngularJS 1.2.0-rc3 ferocious -twitch corrige una serie de problemas de alta prioridad en $ compile y $ animate y allana el camino para 1.2. Esta versión también presenta algunos cambios importantes que en algunos casos podrían romper sus directivas y plantillas. Asegúrese de leer el registro de cambios para comprender estos cambios y aprender a migrar su código si es necesario. Para obtener todos los detalles en este lanzamiento, consulte el changelog .

Hay una descripción en el registro de cambios:

$ parse:

• debido a 5dc35b52 , $ parse y las plantillas en general ya no desplegarán promesas automáticamente . Esta función ha quedado obsoleta y, si es absolutamente necesaria, puede volver a activarse durante el período de transición a través $parseProvider.unwrapPromises(true) .
• debido a b6a37d11 , la función agregada en rc.2 que desenvuelve los valores de retorno de las funciones si los valores son promesas (si el desempaquetado de promesas está habilitado - ver el punto anterior), se revirtió debido a la ruptura de un patrón de uso popular.

Answer 4

Siempre puedes crear un servicio angular común y poner un método de desenvolver allí que de alguna forma recrea cómo funcionaban las promesas anteriores. Aquí hay un método de ejemplo:

var shared = angular.module("shared");

shared.service("Common", [
    function () {

        // [Unwrap] will return a value to the scope which is automatially updated. For example,
        //      you can pass the second argument an ng-resource call or promise, and when the result comes back
        //      it will update the first argument. You can also pass a function that returns an ng-resource or
        //      promise and it will extend the first argument to contain a new "load()" method which can make the
        //      call again. The first argument should either be an object (like {}) or an array (like []) based on
        //      the expected return value of the promise.
        // Usage: $scope.reminders = Common.unwrap([], Reminders.query().$promise);
        // Usage: $scope.reminders = Common.unwrap([], Reminders.query());
        // Usage: $scope.reminders = Common.unwrap([], function() { return Reminders.query(); });
        // Usage: $scope.reminders.load();
        this.unwrap = function(result, func) {
            if (!result || !func) return result;

            var then = function(promise) {
                //see if they sent a resource
                if (''$promise'' in promise) {
                    promise.$promise.then(update);
                }
                //see if they sent a promise directly
                else if (''then'' in promise) {
                    promise.then(update);
                }
            };

            var update = function(data) {
                if ($.isArray(result)) {
                    //clear result list
                    result.length = 0;
                    //populate result list with data
                    $.each(data, function(i, item) {
                        result.push(item);
                    });
                } else {
                    //clear result object
                    for (var prop in result) {
                        if (prop !== ''load'') delete result[prop];
                    }
                    //deep populate result object from data
                    $.extend(true, result, data);
                }
            };

            //see if they sent a function that returns a promise, or a promise itself
            if ($.isFunction(func)) {
                // create load event for reuse
                result.load = function() {
                    then(func());
                };
                result.load();
            } else {
                then(func);
            }

            return result;
        };
    }
]);

Esto básicamente funciona como las viejas promesas lo hicieron y se resuelven automáticamente. Sin embargo, si el segundo argumento es una función, tiene el beneficio adicional de agregar un método ".load ()" que puede volver a cargar el valor en el alcance.

angular.module(''site'').controller("homeController", function(Common) {
    $scope.reminders = Common.unwrap([], Reminders.query().$promise);
    $scope.reminders = Common.unwrap([], Reminders.query());
    $scope.reminders = Common.unwrap([], function() { return Reminders.query(); });
    function refresh() {
        $scope.reminders.load();
    }
});