sharing data between templates in angular, how to?

Question

I have 2 template, in 1st template I use the function and after its successful implementation,i want to get data in a 2nd template. How can I do it? Both template using the same controller

My 1st 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>

My 2nd template:

<h3>Результат поиска по запросу: {{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;
        })
    }

})();

Answer 1

I would suggest you use cache for best practice. While you are using two templates and when you load your another template it's also going to reload your controller. If you are done with your search in first template then you can save result in cache and then when you redirect to template then just look into that if there is any result then just show it.

Answer 2

Setting $scope equal to the value of the input field should allow you to pass the data from the 1st template to the 2nd template.

Answer 3

Use ng-if to switch between two piece of HTMl snippets. By the way, template is a special term in Angular, indicating something like template in a directive.

For example:

<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>

After you have retrived the data successfully, i.e., the variable items is true, Angular will switch to the 2nd template for you.

NOTE: you are using vm (this) and $scope on the controller at them same time, which is not encouraged.

Answer 4

To do it "The angular way" you should use directives. Within directives you can require controllers of other directives so you can share data as you need. An example is here: How to require a controller in an angularjs directive

Answer 5

You can get data after a user clicks on the search button, in your code i.e. through vm.search function in the controller which should be used to get data through an api call check this below example.

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>