Question

173

AngularJS UI Bootstrap modal is unable to perform functions from scope

rated 0 times [ 180] [ 7] / answers: 1 / hits: 23780 / 11 Years ago, tue, october 1, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

natalyah

Add To Favorites

Follow

Total Points: 371

Total Questions: 90

Total Answers: 105

Location: The Bahamas

Member since Wed, Apr 12, 2023

1 Year ago

answered 11 Years ago bryonk · Accepted Answer

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;

        }

    }

}