AngularJS UI Bootstrap modal is unable to perform functions from scope

All we need is an easy explanation of the problem, so here it is.

In my angularjs app I use UI Bootstrap for creating modals. I pass scope and custom controller into the modal, it shows my data from original scope but cannot perform any of its function.
I have main controller:

myapp.controller('WsCtrl', function WsCtrl($scope, $location, todoStorage, filterFilter, $modal, $log) {

In controller I have next:

$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
    var modalInstance = $modal.open({
        templateUrl: 'partials/users.html',
        scope: $scope,
        controller: ModalInstanceCtrl,
        resolve: {
            items: function () {
                return $scope.items;
            },
            users: function(){
                return $scope.users;
            },
            CurrentDate: function(){
                return $scope.CurrentDate;
            }
        }
    });

    modalInstance.result.then(function (selectedItem) {
        console.log(selectedItem);
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

And also I have another function outside the controller:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

    $scope.items = items;
    $scope.users = users;
    $scope.CurrentDate = CurrentDate;
    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.num = 11;

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

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

When I pass the scope to modal – I can see all my users, but I can’t add one ’cause off problem with functions in my original scope.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You don’t need scope: $scope. The resolve parameter is responsible for passing variables to ModalInstanceCtrl. But you must add those parameters to its dependencies (their names must match those from resolve), so if you had:

resolve: {
    foo: function(){
        return $scope.something
    }
}

then you must have

var ModalInstanceCtrl = function ($scope, $modalInstance, foo) {
    $scope.foo = foo;
    // ...
}

Oh, and functions can be passed just like other variables, inside resolve:

resolve: {
    someFunction: function(){
        return $scope.someFunctionFromOriginalScope
    }
}

Additionally, you can inject any other service in the resolve section and perform additional logic inside of it:

resolve: {
    someFunction: function(configService){
        if (configService.isProduction){
            return angular.noop;
        } else {
            return $scope.someFunctionFromOriginalScope;
        }
    }
}

Method 2

If you really need to pass a custom scope (i.e., if you want to avoid a dependency injection not always satisfied), you would do it this way:

$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
    var modalInstance = $modal.open({
        templateUrl: 'partials/users.html',
        scope: function() {
            var scope = $rootScope.$new();
            scope.items = $scope.items;
            scope.users = $scope.users;
            scope.currentDate = $scope.currentDate;
            scope.someFunction = function () {
                // do some stuff with scope.items
            }
            return scope;
        }(),
        controller: 'ModalInstanceCtrl'
    });

    modalInstance.result.then(function (selectedItem) {
        console.log(selectedItem);
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

And your controller would look like this:

var ModalInstanceCtrl = function ($scope, $modalInstance) {
    // Your controller already has $scope.items, $scope.users, $scope.currentDate and $scope.someFunction

    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.num = 11;

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

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply