带有 ng-if 的指令未在 Angular.js 中呈现

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) 也不会在控制台上打印任何内容。但是，如果我使用 like

<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-if 为真之前它也不可用。

要解决此问题，最好的办法是将 ng-if 更改为 $scope 中的内容，或者更好的是，只需使用 <search-results></search-results> 指令，对于 html 在 ...searchResults.template.html 中包含布尔开关，例如

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

带有 ng-if 的指令未在 Angular.js 中呈现

directive with ng-if not rendering in Angular.js

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-if