javascript - que - ¿Puede la función de llamada de plantilla angular devolver la promesa

ng-cloak que es

Question

La documentación de $ q de Angular dice "$ q las promesas son reconocidas por el motor de plantillas en angular, lo que significa que en las plantillas puedes tratar las promesas adjuntas a un alcance como si fueran los valores resultantes".

Las plantillas de vista angular también le permiten evaluar expresiones, lo que significa que puede llamar a funciones expuestas desde el alcance.

Descubrí que una plantilla de vista puede hacer referencia a valores reales, promesas (que finalmente se resuelven en valores reales) o funciones que devuelven valores reales, pero no funciones que devuelven promesas, que siempre dan {} a la plantilla de visualización.

Creé un violín con un ejemplo de esto .

¿Alguien puede hacerlo mejor o dirigirme en la dirección correcta?

(Quizás usar una función en la plantilla de vista es una mala idea, hay otros problemas con esta técnica, porque la observación angular de una función no puede decir si ha cambiado sin llamar a la función, por lo que la función observada se evalúa en cada ciclo de resumen. He visto estas dos preguntas y en las dos, la respuesta recomendada fue utilizar la promesa. Luego, cambiar una propiedad normal en el alcance y hacer que la plantilla de visualización observe la propiedad normal en lugar de la promesa. Lo entiendo, pero para mi uso, quiero proporcionar algunos parámetros para calcular un valor, y es conveniente proporcionar esos parámetros directamente en la plantilla de visualización. Básicamente, estoy tratando de escribir algo como url_for en Flask o Rails ).

Answer 1

Una promesa representa un valor futuro, generalmente un resultado futuro de una operación asincrónica, y nos permite definir qué sucederá una vez que este valor esté disponible o cuando ocurra un error.

Referencia

var promise = asyncFunction(parameters); 

promise.then( 
 function (result) { 
 // Do Something with the result 
 }, 
 function (error) { 
 // Handle error (exception, etc). 
 }); 

Puede ajustar cualquier valor con una promesa, utilizando el método de utilidad $q.when() .

• $ q.when (promesa) → promesa
• $ q.when (no Promesa) → una nueva promesa, que
• resolver asincrónicamente al valor dado no Promesa.

===========================

En tu ejemplo:

HTML

<div ng-app ng-controller="testController">
    <p>Direct property: {{ property }}</p>
    <p>Function returning property: {{ getProperty() }}</p>
    <p>Direct promise: {{ promise }}</p>
    <p>Function returning promise: {{ out }}</p>
</div>

JS

function testController($scope, $q) {
    var deferred = $q.defer();
    deferred.resolve(''some lazy text'');
    $scope.promise = deferred.promise;

    $scope.out = $scope.promise.then(function (result) {
        console.log(result);
        return result;
    });


    $scope.property = ''some text'';
    $scope.getProperty = function () {
        return $scope.property;
    };
}

Demo Fiddle

Answer 2

No estoy exactamente seguro, pero si devuelves un objeto con la promesa como propiedad, funciona. (violín)

var deferred2 = $q.defer();
$scope.po = { promise: deferred2.promise };
$scope.getPo = function() {
    return $scope.po;
};

$timeout(function() {
    deferred2.resolve(''some lazy text'');
}, 2000);

HTML:

<p>Function returning promise (object): {{ getPo().promise }}</p>