如何将变化的数据传递给模态？

Question

I'm trying to pass a changing scope variable into a modal window. I'm having trouble allowing the variable to change once the modal is open. Currently I have the data being passed to a controller when the modal is opened:

    scope.open = function (roomname, image) {
        console.log("clicked modal");

        console.log("roomName: " + roomname);
        console.log("image: " + image);

        scope.imageContents = image;
        console.log("scope.imageContents: " + scope.imageContents);


        scope.modalInstance = $modal.open({
            animation: scope.animationsEnabled,
            templateUrl: 'tpl/modal-template.tpl.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                items: function () {
                    console.log("scope.imageContents in resolve: " + scope.imageContents);
                    return scope.imageContents;
                },
                compassHeading: function () {
                    console.log("scope.imageContents in resolve: " + scope.compassHeading);
                    return scope.compassHeading;
                }
            }
        });
    };

and my controller:

angular.module('TestApp').controller('ModalInstanceCtrl',function ($scope, $modalInstance, items, compassHeading) {

    'use strict';

    $scope.items = items;
    $scope.selected = {
        item: $scope.items
    };
    $scope.compassHeading = compassHeading;

});

The compass Heading variable is constantly being updated, so I am trying to get the compassHeading variable to show these changes in the modal.

Answer 1

You could use a service which has your variable along with other variables:

angular.module('TestApp')
    .service('TestService', [function () {
        return {
            model: {
                'compassHeading': null
            }
        };
    }]);

And in your main controller, you could use it like:

angular.module('TestApp')
    .controller('MainController', ['$scope', 'TestService', function ($scope, testService) {
        $scope.model = testService.model;
        ...
    }]);

And in your $modal controller, you could do the same:

angular.module('TestApp')
    .controller('ModalInstanceCtrl', ['$scope', 'TestService', function ($scope, testService) {
        $scope.model = testService.model;
    }]);

Then, anytime the value of compassHeading needs to be changed, you could just change it using the normal: $scope.model.compassHeading = <some_value_here>; .

Also, the value of compassHeading , if changed outside the controllers, will also be changed inside the controllers, since the model object of the service is called by reference.