Create Angular Modal Outside of Controller

Question

In app.js, and specifically within $rootScope.$on('$routeChangeStart') I have a function that creates a modal:

setIdleTimeout.$inject = ['$uibModal']
function setIdleTimeout(timerStart, timerDuration, $scope, $uibModal){
    console.log('timerStart: ', timerStart, 'timerDuration: ', timerDuration)

    setTimeout(function(){
        console.log('setTimeout running')
        var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: '****',
            controller: '****',
            scope: $scope,
            size: size,
            backdrop  : 'static',
            resolve: {}
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem
        }, function () { })

    }, 10000)
}

Im getting Uncaught TypeError: Cannot read property 'open' of undefined, even tho Im injecting it and including the source code in Index.html

<script src="~/lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>

How do I create a modal outside of a controller?

LeOn - Han Li · Accepted Answer · 2016-09-21 18:07:39Z

1

Might need more detail about your code structure, specially the context where you call $rootScope.$on()...

I think the problem you have here is $uibModal is not properly injected. Instead of using $inject in the setIdleTimeout function, tried to inject the $uibModal in the the same level as where you inject your $rootScope.

answered Sep 21, 2016 at 18:07

LeOn - Han Li

10.4k2 gold badges70 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create Angular Modal Outside of Controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related