Как общаться между двумя видами в ui-router

Question

Как общаться между двумя видами в ui-router

0

Это моя проблема:

Я использую multi-views с ui-router.

Мое первое представление соответствует моему базовому шаблону, который включает в себя теги формы:

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

Мое второе представление содержит содержимое полей ввода формы и подходящего ng -model.

Мое третье представление включает директиву (поскольку этот блок будет повторяться на других страницах), который соответствует проверке моей формы.

Моя проблема в том, что когда я нажимаю кнопку отправки, которая находится в моей директиве, я не могу получить объект моей формы, результат возвращается неопределенно.

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

Каким было бы решение получить объект моей формы в моей директиве?
Можно ли интегрировать теги в представлениях?

Заранее благодарю за все ваши ответы

Мой пример: 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>

Greg-A 04 нояб. 2015, в 22:13

Источник

Теги:

angularjs

angular-ui-router

1 ответ

Ещё вопросы

mat3e · Accepted Answer · 2015-11-04T18-28-00.000Z

Параметры всегда одинаковы:

общий контроллер
оказание услуг
Мероприятия

ИМО самым быстрым решением здесь является общий контроллер. + Изменить

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

в

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

и используйте vm.test вместо проверки везде. См.: http://plnkr.co/edit/za4k0X6XHIk6vsXryPav?p=preview

Отлично, спасибо, приятель, это работает!