如果未在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>没有显示，因为它在$scopealgoliaSearch中查找变量，然后才呈现和执行指令代码。该变量不仅不在$scope中，而且在ng-if为true之前，它还不可用。

要解决这个问题，最好的办法是将ng更改为$scope中的内容，或者更好的是，只使用<search-results></search-results>指令，并使...searchResults.template.html中的html包含布尔开关，类似

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