如何在ui路由器中的两个视图之间进行通信

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

我第一视图对应于我的基本模板，它包括我的形式标签：

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

我第二视图包含我的形式输入字段和合适纳克-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' 
     }, 
     '[email protected]': { 
      templateUrl: 'content-form.html', 
      controller: 'scotchController' 
     }, 
     '[email protected]': { 
      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>

页脚-form.html：

<btn-next></btn-next>

来源

2015-11-04 Greg-A

个

选项都是一样的：

共享控制器
服务
事件

IMO这里最快的解决办法是共享控制器。更改

'': { 
    templateUrl: 'partial-about.html' 
}, 
'[email protected]': { 
    templateUrl: 'content-form.html', 
    controller: 'scotchController' 
}

到

'': { 
    templateUrl: 'partial-about.html', 
    controller: 'scotchController as vm' 
}, 
'[email protected]': { 
    templateUrl: 'content-form.html' 
}

，而是使用vm.test测试的无处不在。请参阅：http://plnkr.co/edit/za4k0X6XHIk6vsXryPav?p=preview

来源

2015-11-04 21:28:32 mat3e

非常好，谢谢配合它的作品！ –

如何在ui路由器中的两个视图之间进行通信

回答

相关问题