AngularJS Two way data binding

Question

In my controller I have the following data:

(function() {
'use strict';

angular
    .module('myappl.mymodule')
    .controller('MyController', MyController);

MyController.$inject = ['$scope', 'myService'];

function MyController($scope, 'myService') {
    $scope.vm = this; 
    var vm = this;

    vm.myService = myService;

    vm.userManagement = userManagement.data;
    vm.userManagementSomeDataObjects = vm.userManagement.someDataObjects;

Somewhere in this controller I have a function which first gets data from backend and than invoke showModal:

function modalForUserInteraction() {
        vm.myService.getData(parameters).success(function(data) {
            vm.modalService.showModal(data, vm.userManagement, vm.userManagementSomeDataObjects);
        }).error(function(data) {
            console.log('error');
        });
    }

The modal- controller looks like this:

...
function showModalService($modal, $stateParams, otherService) {
    var service = {
        showModal: showModal
    };      
    return service;

    ////////////

    function showModal(data, userManagement, userManagementSomeDataObjects) {
         var myModal = $modal.open({
            controller: ModalController,
            controllerAs: 'vm',
            windowClass: "modal fade in",
            resolve: {  
                userManagement: function() {
                return userManagement;
            },
            userManagementSomeDataObjects: function() {
                return userManagementSomeDataObjects;
            }
            },  
            templateUrl: 'url/to.html'
        });
        return myModal;

and in the modal controller there is a method like this one:

function ModalController(userManagement, userManagementSomeDataObjects) {
var vm = this;

...

function doSomeActionAfterButtonClickAtModal() {
    otherService.getDataFromBackend(params).success(function(data) {

        userManagement = data;
            userManagementSomeDataObjects = data.someDataObjects;

})error(function(data) {
    console.log('error');
});
}

If I do it like this:

userManagement = data; and userManagementSomeDataObjects = data.someDataObjects; than the new data is not set.

If I set each property separately of the objects than it works more often than not but somethimes it does not.

My question now would be what I can do in order to get it work. Currently I do not have a $scope- variable in my modal and actually I don't know if $scopeOfModal.$apply() would help and I also don't know how to get access from modal to MyController - $scope.

I would be glad for any hint in this direction.

Thanks a lot!

[EDIT] Here is an image of my currently viewed (right) an on the left side the object, which should be shown after setting in modal- function.

[EDIT]

is there any posibility to pass parameters to this function in the modal controller:

this.previewArchivedSchedule = function(hereINeedParamerts) {
             alert('archivedScheduleIntervalContainerId: ' + hereINeedParamerts); 
          };

Check my answer for Pass variable to modal without using $scope. If covers sending data in both directions. — georgeawg
– georgeawg, Commented Nov 20, 2015 at 15:13
It has a working Plunk and if you find it useful, give it an "up". — georgeawg
– georgeawg, Commented Nov 20, 2015 at 15:23
Have you had any luck solving your issue using my solution or the one linked by georgeawg? If you are having problems, feel free to add comments for clarification or edit your original post. — Jon Quarfoth
– Jon Quarfoth, Commented Nov 20, 2015 at 16:48
Thanks a lot for your example, it seems to be the right solution for my problem. I am still fighting with parameters: Is it possible to set function parameters from modal html to Modal controller function? — quma
– quma, Commented Nov 20, 2015 at 18:24

Jon Quarfoth · Accepted Answer · 2015-11-20 13:58:07Z

This looks to me just like it may have nothing to do with angular, just some confusion with javascript variable references.

First you pass userManagement from showModalService.showModal to ModalController via resolve.

So now ModalController has a reference to the same object as showModalService.

However, in ModalController, you reassign the userManagement variable to point to data instead. So now the userManagement variable inside ModalController isn't pointing at the injected object anymore, because you've reassigned it. This has nothing to do with angular two-way data binding, it's just javascript variable assignment. You've lost your reference to the original object.

showModalService still has a reference to the instance that it sent in via resolve, it has no idea that you swapped the reference out in the ModalController.

I'd try sending over an object encapsulating the data you want to share to fix this problem.

function showModal(data, userManagement, userManagementSomeDataObjects) {
     var myModal = $modal.open({
        controller: ModalController,
        controllerAs: 'vm',
        windowClass: "modal fade in",
        resolve: {  
            sharedData: function() {
                return {
                    userManagement: userManagement,
                    userManagementSomeDataObjects: userManagementSomeDataObjects
                }
        }, 
        templateUrl: 'url/to.html'
    });
    return myModal;

Then manipulate the properties on the shared object instead of overwriting references.

function ModalController(sharedData) {
var vm = this;

...

function doSomeActionAfterButtonClickAtModal() {
    otherService.getDataFromBackend(params).success(function(data) {
        sharedData.userManagement = data;
        sharedData.userManagementSomeDataObjects = data.someDataObjects;
    })error(function(data) {
        console.log('error');
    });
}

Collectives™ on Stack Overflow

AngularJS Two way data binding

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related