AngularJS UI Modal

Question

I have a register form inside a modal. When I submit the form inside the modal I want to push the saved item in the array $scope.lists = []. The $scope.lists is inside the ListsController and I have the submit function inside the ModalsController.

angular.module('app')
.controller('ListsController', function ($scope, listsRegister, $uibModal) {
    $scope.lists = [];

    $scope.openFormListModal = function () {
        var modalInstance = $uibModal.open({
            ...,
            controller: function ($scope, $uibModalInstance) {                  

                // Submiting the form
                $scope.submit = function () {

                    listsRegister.register($scope.list)                     
                        .then(function (response) {
                            if (response.insert) {
                                $scope.form.$setPristine();
                                $scope.form.$setUntouched();
                                $scope.list = {};

                                // $scope.lists.push(response); <- Is it possible to access the lists from the ListsController inside this Modal's Controller?
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                };
            },
            size: 'sm',
        });
    };
});

Is there a good way to access the $scope from the ListsController? I need to update the $scope.lists array after saving the data.

score 4 · Accepted Answer · answered May 01 '17 at 15:03

You can pass values to the ui modal in this way:

var modal= $modal.open({
      templateUrl: '...',
      controller: '...',
      resolve: {
         myList: function () {
           return $scope.lists;
         }
      }
});

Then you will be able to access myList inside your controller injecting it

score 0 · Answer 2 · answered May 01 '17 at 15:15

This is straight from the documentation:

scope (Type: $scope) - The parent scope instance to be used for the modal's content. Defaults to $rootScope.

var modalInstance = $uibModal.open({
   scope: $scope,
   controller: function($scope) {
     ...
   },
   size: 'sm'
});

score 0 · Answer 3 · edited May 23 '17 at 11:47

Notice that you have to be careful with which $scope you are referring to. Angular defines an hierarchy for the scopes and in this case you are using two scopes which are parent and child in this hierarchy. Each of the controllers that you share has its own $scope object. To have a clearer idea about the topic you can check: https://docs.angularjs.org/guide/scope

Said that, it looks like you want to populate some data from the child $scope to the parent $scope. For that purpose, "you need to use an object (not a primitive) in the parent scope and then you will be able to update it directly from the child scope". This is part of the accepted answer in Update parent scope variable. Check it out.

Also, I recommend to use the "vm" notation in your controllers in order to protect your $scope objects. It provides a layer above your $scope in which you do all the work. It is a good practice recommended by John Papa (Angular's guru). You can have more information in https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/ and AngularJS - Why use "Controller as vm"?

AngularJS UI Modal

3 Answers3