Возврат значения из модального в Angular Bootstrap

Я пытаюсь использовать модальную директиву из Angular Bootstrap, чтобы открыть диалоговое окно, изменить значение (которое было передано) и затем извлечь его.

Однако по какой-то причине значение никогда не обновляется в области. И, фактически, если я добавлю "ng-change" и придерживаюсь в нем точки останова, кажется, что по какой-то причине создается другой уровень области.

Я создал плункер здесь: http://plnkr.co/edit/Vy6gLgOJbWcLsHJtaGpV?p=preview

Я озадачен этим. Любые идеи?

Ответ 1

Javascript передает примитивы (например, целочисленные) по значению. Поэтому, когда вы возвращаете целое число из функции разрешения или принимаете его как аргумент функции, вы используете копию исходного целого числа. Таким образом, изменение его (как и во всплывающем окне) не повлияет на оригинал.

Решение этого - использовать объект и передавать его. например вместо целого "часа" используйте время объекта:

$scope.time = {
  hour: 12
};

и убедитесь, что вы используете его в объекте разрешения:

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

Вы можете видеть это на http://plnkr.co/edit/8YQGTn79AO4X7Tb7ann7?p=preview

Изменить: извлечено из файла 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;
    };

};