I have two templates: in the first template, I am using a function and after its successful execution, I want to retrieve data in the second template. How can I achieve this? Both templates are utilizing the same controller.
First Template:
<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>
Second Template:
<h3>Search Results for: {{q}}</h3>
<ul ng-repeat='item in items'>
<li>{{item.name}}</li>
</ul>
Controller:
(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;
})
}
})();