按下按钮后加载模板的内容

时间:2015-03-22 18:28:19

标签: angularjs

如何在按下搜索按钮后才能加载搜索结果模板?

以下是我的代码示例:

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'
       };
    });
})();

搜索form.html

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

页面content.html

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

1 个答案:

答案 0 :(得分:1)

如果您只是想显示和隐藏内容,为什么不尝试使用ng-show or ng-hide

实施例

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

除非“加载”是指从文件中获取模板?