CODEWITHSUNDEEP
javascriptangularjsmodal-dialogangularjs-scopeangular-ui
cpk
cpk

Reputation: 809

Pass Data Between Angular UI Modals

I am looking to pass data between modals using Angular UI. Here is the modalController that defines the controller and view partial for each modal.

app.controller("modalController", function($scope, $modal){

$scope.registerOpen = function(size) {

    var modalInstance = $modal.open({
        templateUrl: "templates/registrationModal.html",
        controller: 'modalInstanceController',
        size: size
    });
};

$scope.categoriesOpen = function(size) {

    var modalInstance = $modal.open({
        templateUrl: "templates/categoriesModal.html",
        controller: 'modalInstanceController',
        size: size
    });
};

});

Here is the Modal Instance Controller which is called for each modal which handles closing and opening the modal

 app.controller("modalInstanceController", function($scope, $modalInstance){

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

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

});

Here is the register modal body that has two nested controllers. the model formData points to en empty object inside of registerFormController.

Register Modal Body:

<div class="modal-body" ng-controller="registerFormController">
        <div class="facebookButton">
            <div class="lucida">Sign In With Facebook</div>
        </div>

            <div class="registerForm" ng-controller="modalController">
                <input type="email" placeholder="Email" class="registerEmail block" ng-model="formData.email">

                <input type="password" placeholder="password" required class="registerPassword block" ng-model="formData.password">

                <input type="password" placeholder="password" name="password2" required ui-validate=" '$value==formData.password' " ui-validate-watch=" 'formData.password' "class="registerPassword2 block" ng-model="formData.password2">

                <span ng-show="registerForm.password2.$error.validator" class="block">Passwords do not match!</span>

                <!-- ng-disabled="registerForm.$invalid" -->
                <button type="button" class="create-account" ng-click="categoriesOpen('md')" >Next</button>
          </div>  
          {{formData}}
    </div>

Categories Modal:

<div class="modal-body" ng-controller="registerFormController">
            <div class="registerForm">
                <label class="event-category" ng-model="formData.sports" btn-checkbox>Sports</label>
                <label class="event-category" ng-model="formData.bars" btn-checkbox>Bars</label>
                <label class="event-category" ng-model="formData.family" btn-checkbox>Family</label>
                <label class="event-category" ng-model="formData.movies" btn-checkbox>Movies</label>


                <button type="submit" ng-click="processForm(); confirmationOpen()" class="create-account" ng-disabled="registerForm.$invalid">Submit</button>
          </div>
          {{formData}}
    </div>

Here, in the categories modal, {{formData}} doesn't reflect the input values from the previous modal. I think I might need to resolve and return the data back to the controller to pass it along to the next, but not sure how to implement this.

Finally the registerFormController

app.controller('registerFormController', function($scope, $http){


$scope.formData = {};

$scope.processForm = function() {
    $http({
        method: 'POST',
        url: '/user',
        data: $scope.formData,
        headers: {"Content-Type": "application/json"}
    }).success(function(data){

        if(!data) {
            console.log('not working');
        } else if (data) {
            console.log('successfully POSTing!');
        }

    });
};

 });

Whew... Sorry for the long post. Somewhat new to angular so I really appreciate the responses and help. I can convert this to a codepen if necessary. Thanks in advance.

Upvotes: 1

Views: 373

Answers (1)

Kostya Shkryob
Kostya Shkryob

Reputation: 2369

You can share data between controllers with AngularJS service. I have made simple example:

    <!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    </head>
    <body ng-app="plunker">
        <div ng-controller="registerFormController">
            <h3>Register Form Controller</h3>
            <input type="text" ng-model="formData.firstName">
            <br>
            <input type="text" ng-model="formData.lastName">
            <br>
            {{formData}}
        </div>
        <div ng-controller="modalInstanceController">
            <h3>Modal Instance Controller</h3>
            <input type="text" ng-model="formData.firstName">
            <br>
            <input type="text" ng-model="formData.lastName">
            <br>
            {{formData}}
        </div>
        <script>
            var app = angular.module('plunker', []);
            app.controller('registerFormController', function($scope, registerDataService){
                $scope.formData = registerDataService.data;
            }).controller("modalInstanceController", function($scope, registerDataService){
                $scope.formData = registerDataService.data;
            }).factory('registerDataService', function() {
                var registerDataService = {};
                registerDataService.data = {
                    'firstName': 'Kostya',
                    'lastName': 'Shkryob'
                };

                return registerDataService;
            });
        </script>
    </body>
</html>

Upvotes: 1

Related Questions