Angularjs – Returning a value from a modal in Angular Bootstrap

angular-ui-bootstrapangularjs

I'm trying to use the modal directive from Angular Bootstrap to pop up a dialog, change a value (that was passed in) and then retrieve it.

However, for some reason the value never gets updated in the scope. And, in fact, if I put in a "ng-change" and stick a breakpoint in it, it seems that there's another level of scope being created for some reason.

I've created a plunker here: http://plnkr.co/edit/Vy6gLgOJbWcLsHJtaGpV?p=preview

I'm baffled by this. Any ideas?

Best Answer

Javascript passes primitives (such as integer) by value. So when you return an integer from the resolve function, or accept it as a function argument, you're using a copy of the original integer. So then changing it (as you do in the popup) will have no effect on the original.

A solution to this is to use an object, and pass that around. e.g. instead of an integer 'hour', use an object time:

$scope.time = {
  hour: 12
};

and make sure you use it in the resolve object:

resolve : {
  time : function() {
    return $scope.time;
  }
}

You can see this at http://plnkr.co/edit/8YQGTn79AO4X7Tb7ann7?p=preview

Edit : Extracted from the plnkr

    var testApp = angular.module('testApp', ['ui.bootstrap' ]);

    testApp.controller('UserDataCtrl',function ($scope, $modal) {
        $scope.time = {
          hour: 12
        };
        $scope.showPopup = function() {
            $modal.open({
                templateUrl : 'popup.html',
                controller : PopupCtrl,
                resolve : {
                    time : function() {
                        return $scope.time;
                    }
                }
            }).result.then(function(result) {
                $scope.hour = result;
            });
        };

    });

var PopupCtrl = function($scope, $modalInstance, $http, time) {
    $scope.level="PopupCtrl";

    $scope.possibleTimes= [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23];

    $scope.time = time;

    $scope.ok = function() {
        $modalInstance.close($scope.hour);  
    };

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };

    $scope.changing = function(){
        var x = 5;
    };

};
Related Topic