what is happening to my angular scope?

Question

I am using angularstrap modal service to open a login modal on any page when login is required. I open one like this:

var scope = {'foo': 'bar'};
var myOtherModal = $modal({scope: scope, template: 'modal/login.html', show: false});

the login.html contains the modal markup but it also has a controller bound to it:

<div ng-controller="SignInController" class="modal"  tabindex="-1" role="dialog">
    <input ng-modal="foo"/>

In the controller code, how do I get access to the foo prop on the scope that I am passing in?

What is happening to my scope? Is a scope object created by $modal the one and the same that is used by the controller? It appears that its not the case.

What is the best way to solve this problem? (Ability to open a login dialog from anywhere and have control over its scope from the controller)

Thanks

Answer 1

Think of opening a modal as a function call... where you pass data in and get data back. It's not the ONLY way to approach it but I think it's a clean way to approach it.

I generally follow this pattern, giving the modal it's own controller & passing data in & getting data back by passing it into the promise:

var ModalController = function($scope, $modalInstance, input) {
    $scope.input = input;
    var output = {
       username: "",
       password: ""
    };  

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

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

$scope.openModal = function(data) {
    var modalInstance = $modal.open({
        templateUrl: 'popupDialog.tpl.html',
        controller: ['$scope', '$modalInstance', 'input', ModalController],
        resolve: {
            input: function() {
                return data;
            }
        }
    });

    modalInstance.result.then(function(output) {
        // TODO: do something with the output.username & output.password... 
        // call Login Service, etc.
    });
};

EDIT: Adding popup html...

<form class="form-horizontal">
    <div class="modal-header">
        <h3>Please Log In</h3>
    </div>

    <div class="modal-body">
        <form name="form" class="form-horizontal">
            <div class="row">
                <label class="col-sm-3 text-info control-label" for="inputUsername">Username</label>
                <input class="col-sm-8 form-control input-sm" type="text" id="inputUsername" name="inputUsername" ng-model="output.username" />
            </div>
            <div class="row">
                <label class="col-sm-3 text-info control-label" for="inputPassword">Password</label>
                <input class="col-sm-8 form-control input-sm" type="text" id="inputPassword" name="inputPassword" ng-model="output.password" />
            </div>
        </form>
    </div>

    <div class="modal-footer">
        <button class="btn btn-sm btn-primary" type="submit" ng-click="ok()">Ok</button>
        <button class="btn btn-sm btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</form>