如何在ui-router中的两个视图之间进行通信答案

【问题标题】：How to communicate between two views in ui-router如何在ui-router中的两个视图之间进行通信
【发布时间】：2015-11-04 20:30:44
【问题描述】：

这是我的问题：

我正在使用带有 ui-router 的多视图。

我的 first view 对应于我的基本模板，其中包括我的表单标签：

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

我的第二个视图包含我的表单输入字段的内容和合适的 ng -model。

我的第三个视图包含一个指令（因为此块将在其他页面上重复），对应于验证我的表单。

我的问题是，当我单击指令中的提交按钮时，我无法检索表单的对象，结果返回 undefined 。

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>

内容形式：

<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>

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

选项总是相同的：

共享控制器
服务
事件

IMO 最快的解决方案是共享控制器。改变

'': {
  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

【讨论】：