Это моя проблема:Как общаться между двумя видами в ui-router
Я использую мульти-виды с ui-router.
Моего первого вид соответствует моему базовому шаблону, который включает в себя мои тег формы:
<form ng-submit="next(myform, test)" name="myform" method="post" role="form">
Моего второго точка зрения содержит содержимое моей форму полого ввода и подходящих нг -модели.
Мой третий вид содержит директиву (так как этот блок будет повторяться на других страницах), который соответствует подтверждению моей формы.
Моя проблема в том, что когда я нажимаю кнопку отправки, которая находится в моей директиве, я не могу получить объект своей формы, результат возвращает неопределенный.
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>
Отлично, спасибо, он работает! –