如果没有在Angular.js中呈现，则使用ng指令

Question

每当我拿回搜索结果时，我就会尝试呈现一个指令。我的计划是保留一个作用域变量algoliaSearch，最初是false，每当我返回搜索结果时，我就将它更改为true。然后，在我看来，我试图根据变量的值来呈现指令。

  .directive('searchResults', function () {
    return {
      restrict: 'E',
      templateUrl: 'app/search/directives/templates/searchResults.template.html',
      controller: ['$scope', 'AlgoliaSearchService', function ($scope, AlgoliaSearchService) {
        $scope.hits = [];
        $scope.nbHits = null;
        $scope.algoliaSearch = false;

        AlgoliaSearchService.on('result', results => {
          $scope.algoliaSearch = true;
          $scope.hits = results.hits;
          $scope.nbHits = results.nbHits;
          console.log($scope.algoliaSearch)
        });

      }]
    };
  })

在我看来，当我返回搜索结果时，我希望呈现该指令。

<search-results ng-if="algoliaSearch"></search-results>

但似乎不起作用。它不会在搜索中呈现任何内容，甚至console.log($scope.algoliaSearch)也不会在控制台上打印任何内容。但是，如果我使用类似的

<search-results></search-results>

或

<search-results ng-if="true"></search-results>

然后，它呈现和console.log工作，但这不是我想要的方式。

我的问题是为什么它不根据我的作用域变量有条件地呈现指令。我想让它有条件地渲染，一旦我得到搜索结果。

任何帮助都是非常感谢的。

Answer 1

您的指令html <search-results ng-if="algoliaSearch"></search-results>没有显示，因为它在呈现和执行指令代码之前正在$scope algoliaSearch中寻找一个变量。这个变量不仅不在$scope中，而且在ng-如果为真之前，它也是不可用的。

要解决这个问题，最好的方法是更改ng如果是$scope中的某个内容，或者更好的是只使用<search-results></search-results>指令，并且...searchResults.template.html中的html包含布尔开关，如下所示

<div class='search-results' ng-if='algoliaSearch'>
  <div ng-repeat='....'>
    <!-- etc -->