CODEWITHSUNDEEP
angularjs
juliano.net
juliano.net

Reputation: 8177

Load the content of a template after pressing a button

How can I can load a search results template only after the search button has been pressed?

Here is a sample of my code:

app.js

(function() {
    var app = angular.module('app', ['app-directives']);

  app.controller('AppController', function() {
    this.buttonClick = function() {
      alert('Test');
    };
  });
})();

directives.js

(function(){
    var app = angular.module('app-directives', []);

    app.directive('searchForm', function() {
       return {
         retrict: 'E',
         templateUrl: '/partials/search-form.html'
       };
    });

    app.directive('searchResults', function() {
       return {
         retrict: 'E',
         templateUrl: '/partials/search-results.html'
       };
    });
})();

search-form.html

<input type="text" id="query" />
<button onclick="buttonClick">Search</button>

page-content.html

<section id="mainContent">
    <search-form></search-form>
    <search-results></search-results>
</section>

Upvotes: 0

Views: 142

Answers (1)

swlim
swlim

Reputation: 452

If you'd like to just show and hide a content, why not try with ng-show or ng-hide?

Example

<search-results ng-show="buttonPressed"></search-results>
OR
<search-results ng-hide="buttonNotPressed"></search-results>

Unless by 'load' you mean getting the template from a file?

Upvotes: 1

Related Questions