CODEWITHSUNDEEP
angularjsangular-ui-router
Greg-A
Greg-A

Reputation: 852

How to communicate between two views in ui-router

This is my problem :

I'm using multi-views with ui-router.

My first view corresponds to my base template which includes my form tags :

<form ng-submit="next(myform, test)" name="myform" method="post" role="form">

My second view contains the contents of my form input fields and suitable ng -model.

My third view includes a directive (since this block will be repeated on other pages ) that corresponds to validate my form.

My problem is this, When I Click the submit button that is in my directive I can not retrieve the object of my form, the result returns undefined .

console.log(obj); ---> return undefined

Thank you in advance for all your answers

My example : http://plnkr.co/edit/6p0zLTSK5sdV4JOvxDVh?p=preview

Apps.js : 

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/about');

  $stateProvider
    .state('about', {
      url: '/about',
      views: {
        '': {
          templateUrl: 'partial-about.html'
        },
        'columnOne@about': {
          templateUrl: 'content-form.html',
          controller: 'scotchController'
        },
        'columnTwo@about': {
          templateUrl: 'footer-form.html'
        }
      }

    });

});

routerApp.controller('scotchController', function($scope) {

});


routerApp.directive('btnNext', ['$http','$state', function($http,$state) {
    /* Controller */
    var controllerPagination = function($scope){
  var vm = this;
        /* Bouton Suivant */
        vm.next= function(form,obj) {
            console.log(obj);
        };
    };
    /* Template */
    var template = '<button type="submit" class="btn bt-sm btn-primary" ng-click="pagination.next(myform.$valid,test)">Suivant</button>';

    return {
        restrict: 'E',
        scope:true,
        template: template,
        controller: controllerPagination,
        controllerAs : 'pagination'
    }
}]);

index.html :

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>

<body ng-app="routerApp">

<nav class="navbar navbar-inverse" role="navigation">
     <ul class="nav navbar-nav">
       <li><a ui-sref="about">About</a></li>
    </ul>
</nav>

<div class="container">
    <div ui-view></div>
</div>

</body>
</html>

partial.about.html :

<h2>myForm</h2>
<div class="row">
  <form ng-submit="next(myform, test)" name="myform" method="post" role="form">
  <div class="col-sm-12" style="border:1px solid red">
    <div ui-view="columnOne"></div>
  </div>

  <div class="col-sm-12" style="border:1px solid blue">
    <div ui-view="columnTwo"></div>
  </div>
  </form>

</div>

content-form :

<div class="container">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" ng-model="test.email"  placeholder="Enter email" required>

    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" ng-model="test.password" id="pwd" placeholder="Enter password" required>

    </div>
</div>

footer-form.html :

<btn-next></btn-next>

Upvotes: 0

Views: 1540

Answers (1)

mat3e
mat3e

Reputation: 779

Options are always the same:

  • shared controller
  • service
  • events

IMO the quickest solution here is the shared controller. Change

'': {
  templateUrl: 'partial-about.html'
},
'columnOne@about': {
  templateUrl: 'content-form.html',
  controller: 'scotchController'
}

to

'': {
  templateUrl: 'partial-about.html',
  controller: 'scotchController as vm'
},
'columnOne@about': {
  templateUrl: 'content-form.html'
}

and use vm.test instead of test everywhere. See: http://plnkr.co/edit/za4k0X6XHIk6vsXryPav?p=preview

Upvotes: 3

Related Questions