У меня есть 2 шаблона, в 1-м шаблоне я использую эту функцию, и после ее успешной реализации я хочу получить данные во втором шаблоне. Как мне это сделать? Оба шаблона с использованием одного и того же контроллера
Мой первый шаблон:
<form ng-submot='vm.search(q)' class="header-search">
<input class="header-search-input" ng-model='q' placeholder="Search">
<button type="button" class="btn btn-default ic-search" aria-label="Left Align" ng-click='vm.search(q)'>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
Мой второй шаблон:
<h3>Результат поиска по запросу: {{q}}</h3>
<ul ng-repeat='item in items'>
<li>{{item.name}}</li>
</ul>
контроллер:
(function() {
'use strict';
angular
.module('beo.layout.controllers')
.controller('NavbarController', NavbarController);
NavbarController.$inject = ['$scope', '$http', '$location'];
function NavbarController($scope, $http, $location) {
var vm = this;
vm.logout = logout;
vm.search = search;
function search(q) {
$http.post('/api/v1/search/', {
q: q
}).success(function(data) {
$location.path('/search/')
$scope.q = q;
$scope.items = data;
})
}
})();
Я бы предложил использовать кеш для лучшей практики. Хотя вы используете два шаблона, и когда вы загружаете свой другой шаблон, он также перезагружает ваш контроллер. Если вы закончили свой поиск в первом шаблоне, вы можете сохранить результат в кеше, а затем, когда вы перенаправите его на шаблон, просто посмотрите, что, если есть какой-либо результат, просто покажите его.
Чтобы сделать это "Угловой способ", вы должны использовать директивы. Внутри директив вам могут потребоваться контроллеры других директив, чтобы вы могли делиться данными по мере необходимости. Примером здесь является: как требовать от контроллера в директиве angularjs
Вы можете получить данные после того, как пользователь нажимает на кнопку поиска, в вашем коде, то есть через функцию vm.search в контроллере, которая должна использоваться для получения данных через вызов api, чтобы проверить это ниже.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.items = [];
vm.search = search;
function search(searchTerm) {
// perform ajax call and set data here on vm.items property
vm.items = data;
}
}
var data = [
{ name: 'Audi' },
{ name: 'Lamborghini' },
{ name: 'Jaguar' }
];
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<form name="searchForm" novalidate="novalidate" ng-submit="searchForm.$valid && ctrl.search(ctrl.searchTerm)">
<label for="searchBox">Search</label>
<input type="text" name="searchBox" ng-model="ctrl.searchTerm" ng-required="true">
<button ng-click="isSubmitted = true">Submit</button>
<span style="color: red;" ng-show="isSubmitted && searchForm.searchBox.$invalid">Search term is required</span>
</form>
<label ng-show="ctrl.items.length">Items matching your search</label>
<div ng-repeat="item in ctrl.items">
{{item.name}}
</div>
</div>
</div>
Используйте ng-if
для переключения между двумя фрагментами фрагментов HTMl. Кстати, template
является специальным термином в Angular, указывающим что-то вроде template in a directive
.
Например:
<div ng-if="!items">
<form ng-submot='vm.search(q)' class="header-search">
<input class="header-search-input" ng-model='q' placeholder="Search">
<button type="button" class="btn btn-default ic-search" aria-label="Left Align" ng-click='vm.search(q)'>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
</div>
<div ng-if="items">
<h3>Результат поиска по запросу: {{q}}</h3>
<ul ng-repeat='item in items'>
<li>{{item.name}}</li>
</ul>
</div>
После того, как вы извлекли данные успешно, т.е. Переменные items
true
, Angular переключится на 2-й шаблон для вас.
ПРИМЕЧАНИЕ. Вы используете одновременно vm
(this
) и $scope
на контроллере, что не рекомендуется.
ng-if
помогает вам контролировать отображение различных фрагментов HTML.
Установка $ scope, равная значению поля ввода, должна позволить вам передать данные из первого шаблона во второй шаблон.