Promise found in the expression. Automatic unwrapping of promises in Angular expressions is deprecated

Question

I'm trying to create a new AngularJS project, but I get some errors :(

This is my app and controller;

var app = angular.module('myApp', ['localytics.directives'])
    .config(['$parseProvider', function ($parseProvider) {
        return $parseProvider.unwrapPromises(true);
    }])
    .controller('myController', function ($scope, $http, $q, $timeout) {
    var simulateAjax;
    simulateAjax = function (result) {
        var deferred, fn;
        deferred = $q.defer();
        fn = function () {
            return deferred.resolve(result);
        };
        $timeout(fn, 1000);
        return deferred.promise;
    };

    $scope.ListOfTags = function () {
        $http({
            method: 'Post',
            url: 'FillCategories'
        }).success(function (data, status, headers, config) {
            $scope.optionsFromQuery = (function () {
                return simulateAjax(data);
            })();
        }).error(function (data, status, headers, config) {
            $scope.message = 'Unexpected Error';
        });
    }
    $scope.directiveOptions = {
        no_results_text: "Error"
    };
});

<div data-ng-click="ListOfTags()"></div>

Im using Chosen.js as follows:

<select id="select_{{ item.RowId }}" ng-model="chosenModel" chosen="directiveOptions" ng-options="item._categoryId as item._categoryName for item in optionsFromQuery" style="width:200px;">
    <option value="">Select</option>
</select>

When I try to get categories it is working but the following exception is thrown (which breaks the Angular app):

[$parse] Promise found in the expression optionsFromQuery. Automatic unwrapping of promises in Angular expressions is deprecated.

On a second attempt to get the categories nothing seems to work.

What is causing this?

Answer 1

From your code:

simulateAjax is a function returns promise. Next, you call this method in success callback.

Therefore ListOfTags returns promise as well.

I would implement it as chain promise instead to mix success callback with then()

• You can chain them to create code flows
• Error propagates, so you can catch it on the end of the chain
• Actually, they are much like an asynchronous equivalent for the well-known try-catch-finally clause.

Example

$scope.ListOfTags = function() {
        var myHttp = $http({method: 'Post', url: 'FillCategories'});

              myHttp.then(function (result) {
                     return simulateAjax(data); 
                    }).then(function (result) {
                       return result;                            
                    }, function (result) {
                        alert("Error: No data returned");                           
                    });         
    }

If you interesting to change your code try followed way (but I still prefer upper case):

 $scope.ListOfTags = function() {
        $http({
            method: 'Post',
            url: 'FillCategories'
        }).success(function (data, status, headers, config) {
            $scope.optionsFromQuery = (function () {
                return simulateAjax(data).then(function (result) {
                       return result;                            
                    }, function (result) {
                        alert("Error: No data returned");
                        return null;
                    });
            })();
        }).error(function (data, status, headers, config) {
            $scope.message = 'Unexpected Error';
        });
    }

Answer 2

You need to save the result of the promise into a separate variable on the scope. (Angular currently does this on its own, but it is about to change that behavior. This means that the template will wait for the promise to finish before displaying the result)

.controller('myController', function ($scope, $http) {
    // old behavior, automatic unwrapping
    $scope.data = $http.get('someUrl');

    // new behavior, no automatic unwrapping
    $http.get('someUrl').success(function(data) {
        scope.data = data;
    });
});