Using ng-model on a resolved promise in AngularJS (strange behavior)

Question

Here's my simple controller and directive:

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

function MyCtrl($scope, $q) {
    var myObject = {
        name: "Dingus",
        favoriteFood: "Chicken",
    };

    var itemDeferred = $q.defer();
    $scope.item = itemDeferred.promise;

    var resolveIt = function() {
        itemDeferred.resolve(myObject);
    };
    resolveIt();
}

myApp.directive('promised', function() {
    return {
        restrict: 'E',
        scope: { boundModel: '=' },
        template: '<input type="text" ng-model="boundModel">',
    };
});

The scope item is resolved from a promise. When I use ng-model in the HTML, why doesn't the input update the item, and why won't the directive even let me type?

See this fiddle for a working example: http://jsfiddle.net/winduptoy/XmBxK/

Mark Rajcok · Accepted Answer · 2013-01-19 05:09:37Z

3

I think what is going on is that every time you type into an input box Angular's digest loop examines the result of the promise and reassigns myObject to $scope.item. Here's one way to avoid that:

//$scope.item = itemDeferred.promise;
var promise = itemDeferred.promise;

promise.then(function(obj) {
   alert('Success: ' + obj);
   $scope.item = obj;
}, function(reason) {
   alert('Failed: ' + reason);
});

Fiddle.

answered Jan 19, 2013 at 5:09

Mark Rajcok

365k114 gold badges501 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martín Coll Over a year ago

This behaviour looks awkward to me. Thanks anyway for solving my problem!

Collectives™ on Stack Overflow

Using ng-model on a resolved promise in AngularJS (strange behavior)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related