AngularJS双向数据绑定

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); 
          };

Answer 1

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');
    });
}