How to open modal from the controller?

[lchan-jigsaw24]

Hi,

I'm trying to open a modal popup from the controller -initially I got this warning:Warning: Attempt to set uninitialized shared state: modal1

then I used SharedState to initialize the modal so the error is no longer showing but the modal is not opening - here is my code snippet:

datacontext.sendEmail(emailArray, selectedNotes).then(function(d) { $scope.noteDialogMessage = d; console.log($scope.noteDialogMessage) }, function(error) { $scope.noteDialogMessage = error;

            }).then(function () {
                SharedState.initialize($scope, 'modal1');
                SharedState.turnOn('modal1');
           // $scope.Ui.turnOn('modal1');
        });

I tried a combination of $scope and $rootScope and as you can see I tried $scope.Ui.turnOn and also SharedState.turnOn but nothing is working! Please help!!

thanks

[nail2008]

Do you inject SharedState? And i think it's better to init at the controller's scope ,not in local

app.controller('ListController', function ($scope, .....,SharedState) { ... });

[flashdave1973]

have you tried adding a click function to your controller? ui-turn-on="modal1" ng-click="clickModal(1)" $scope.clickModal = function( param ) { ... }

[lchan-jigsaw24]

Hi @nail2008 Yes I am injecting SharedState (otherwise, it wouldn't be available) @flashdave1973 , I need to call the modal after my ajax call so can't do it from a click event Thanks

[flashdave1973]

I was able to get this to work $rootScope.Ui.turnOn('modal1'); you can also try $rootScope.Ui.toggle('modal1');

[shawdren]

@flashdave1973 it works for me. Thanks so much.

[achinthas]

I tried with timeout and it worked.

app.controller('EventController', function ($scope, $routeParams, $rootScope, $timeout, SharedState) {
$timeout(function (){
        //$rootScope.Ui.turnOn('friends');
        $rootScope.Ui.toggle('friends');
    }, 100);
}

[RoboSparrow]

Hi, I am new to this app but I noticed that if you are working with ui-content-for and ui-yield-to directives then you need to include ui-content-for inside your ng-view tag. Otherwise your view controller can't find the modal1 node. I don't know if that is intended. Example tpl below.

Controller

app.controller('MainController', function($rootScope, $scope, SharedState){

    SharedState.initialize($scope, 'modal1');
    SharedState.turnOn('modal1');

});

index.html, using ui-content-for

...
<div ng-view class="app-view">
    <div ui-content-for="modals">
        <div ng-include="'modal1.html'"></div>
    </div>
</div>
...
<div ui-yield-to="modals"></div>

alternatively you can include the modal markup directly

<ng-view></ng-view>
<div class="modal" ui-if='modal1' ui-state='modal1'>...</div>