Question

我有2个模板，在第一个模板中我使用该函数，在成功实现之后，我想在第二个模板中获取数据。我该怎么做？两个模板都使用相同的控制器

我的第一个模板：

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

})();

Answer 1

我建议您使用缓存进行最佳操作。当您使用两个模板时，当您加载另一个模板时，它也会重新加载您的控制器。如果您在第一个模板中完成了搜索，那么您可以将结果保存到缓存中，然后当您重定向到模板时，只需查看一下，如果有任何结果，则只显示它。

Answer 2

将$ scope设置为等于输入字段的值应该允许您将数据从第一个模板传递到第二个模板。

Answer 3

使用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会为您切换到第二个模板。

注意：您同时在控制器上使用vm（this）和$scope，这是不鼓励的。

Answer 4

要做到这一点“角度方式”你应该使用指令。在指令中，您可以要求其他指令的控制器，以便您可以根据需要共享数据。这里有一个例子：How to require a controller in an angularjs directive

Answer 5

您可以在用户点击代码中的搜索按钮后获取数据，例如通过控制器中的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>

在角度模板之间共享数据，如何？

5 个答案: