如何在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路由器中的兩個視圖之間進行通信

回答

相關問題