Controller on Modal not working on 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?

No, it doesn't throw an error.

Multitut
– Multitut

2015-10-21 20:05:37 +00:00
Commented Oct 21, 2015 at 20:05 — Multitut
– Multitut, Commented Oct 21, 2015 at 20:05

dfsq · Accepted Answer · 2015-10-27 20:30:34Z

3

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"
    });
};

edited Oct 27, 2015 at 20:30

answered Oct 21, 2015 at 20:01

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

jbrown · Accepted Answer · 2015-10-21 20:15:36Z

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
                });

Collectives™ on Stack Overflow

Controller on Modal not working on AngularJS

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related