Modal上的控制器在AngularJS上不起作用

Question

I have a main users page with users, if you select a user, a modal is opened and should show the user information.

The problem is that the $scope doesn't seem to be working, as it doesn't show the user data on the modal. But if I show that user data anywhere on the main users page, it works fine.

I have this controller:

function userController($scope, $modal, $http, $rootScope) {
    var usrCtrl = this;
    $scope.users = null;
    $scope.openUserForm = function () {
        var modalInstance = $modal.open({
            templateUrl: 'views/modal_user_form.html',
            controller: userController,
            windowClass: "animated flipInY"
        });
    };

var session = JSON.parse(localStorage.session);
$http({
method: 'GET',
url: $rootScope.apiURL+'getAllClientUsers/'+session,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(response){
    if(response.ErrorMessage === null && response.Result !== null){
        $scope.users = response.Result; 
    }
});

//**This is the code that opens the modal
$scope.editViewUser = function(user){
    for (var key in $scope.users) {
        if($scope.users[key].SecUserId === user){
            $scope.selectedUser = $scope.users[key];
        }
    }
    $scope.openUserForm();
};

};

And this modal:

    <div ng-controller="userController">
<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">Create or Edit User</h4>
        <small class="font-bold">Use this modal to create or edit a user</small>
    </div>
    <div class="modal-body">

        <form method="get" class="form-horizontal">
                        <div class="form-group"><label class="col-sm-2 control-label">Nombre</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.FirstName" type="text" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Apellido</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.LastName" type="text" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Usuario</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.UserName" type="text" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10"><input ng-model="selectedUser.Email" type="email" class="form-control"></div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Activo</label>
                            <div class="col-sm-10">
                                <div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div>
                            </div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Email Verificado</label>
                            <div class="col-sm-10">
                                <div><label> <input ng-model="selectedUser.FirstName" type="checkbox" value=""></label></div>
                            </div>
                        </div>
                        <div class="form-group"><label class="col-sm-2 control-label">Privilegios</label>
                            <div class="col-sm-10">
                                <select class="form-control m-b" name="account">
                                    <option ng-repeat="priv in selectedUser.EffectivePrivileges">{{ priv }}</option>
                                </select>
                            </div>
                        </div>
                    </form>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">Close</button>
        <button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
    </div>
</div>
</div>

I tried injecting the controller and also using the ng-controller, and scope property for modal.

What am I missing?

Answer 1

The problem is that modal template is compiled in the scope which doesn't inherit from your $scope . To make a connection between them you can tell modal to create a new child scope of your scope:

$scope.openUserForm = function () {
    var modalInstance = $modal.open({
        scope: $scope, // <----- add this instruction
        templateUrl: 'views/modal_user_form.html',
        controller: userController,
        windowClass: "animated flipInY"
    });
};

Answer 2

Generally, the modal would have its own controller rather than point to the controller that its called from. You would inject the model (selectedUser) into the modal controller, work on it, then pass it back to parent. Also, you can give user option to cancel in which case no changes are made to parent controller model.

Modal controller:

app.controller('UserModalController', [
    '$scope',
    '$modalInstance',
    'selectedUser',
    function ($scope, $modalInstance, selectedUser) {

    $scope.selectedUser = selectedUser;

    $scope.cancel= function () {
        // user cancelled, return to parent controller
        $modalInstance.dismiss('cancel');
    };

    $scope.save = function () {
        // close modal, return model to parent controller
        $modalInstance.close($scope.selectedUser);
    };

]);

Changes to main controller:

                var modalInstance = $modal.open({
                  templateUrl: 'views/modal_user_form.html',
                  controller: 'UserModalController',
                  windowClass: "animated flipInY",
                  resolve: {
                    selectedUser: function() {
                      return $scope.selectedUser;
                    }
                  }
                });

                modalInstance.result.then(function(updatedUser) {
                  // deal with updated user
                }, function() {
                  // modal cancelled
                });