将范围隐藏在 angularJS

Question

我遇到了一个问题，我需要在用户开始在搜索栏中输入内容之前隐藏结果。我使用的是 DotNetNuke 插件，因此我自己没有构建这个模块。我认为我需要使用的范围是 '.angrid-search'，它有一个方法 returns 搜索词，然后它将使用它来决定是否显示 'angrid-grid' .这是我迄今为止尝试过的代码，以及许多不同的类似变体。

if (angular.element($('.angrid-search')).searchTerms === undefined){
    angular.element($('.angrid-grid')).hide();
}

angular.element($('.angrid-search')) 返回 undefined，一旦输入内容，returns 就会返回搜索词。在我看来，问题出在第二行，我在其中尝试隐藏元素。

我对 Angular 非常陌生（这几乎是我的第一个真正的问题），所以非常感谢用外行的术语解释，特别是因为我需要学习，就像我需要解决一样重要这个问题。

这是基本的DOM

<div class="angrid">
    <div class="angrid-search">
    </div>
    <div class="angrid-grid-view">
        <div class="angrid-grid">
        </div>
    </div>
</div>

中间有一堆东西，但这些是相关的范围，我不想 cpypst 检查器 window。我的主要问题是：.hide() 方法是否适用于这种情况？

Answer 1

你可以尝试类似的东西。

<div class="angrid">
<div class="angrid-search">
</div>
<div class="angrid-grid-view">
    <div class="angrid-grid" ng-hide="hidegrid">
    </div>
</div>

在 js 中

if (angular.element($('.angrid-search')).searchTerms === undefined){
    angular.element($('.angrid-grid')).hidegrid = true;
}

Answer 2

是的。它应该工作。这是一个演示：

angular.module('demo', [])
  .controller('demoCtrl', ['$scope',
    function($scope) {
      $scope.testFn = function() {
        if (angular.element($('.angrid-search')).searchTerms === undefined) {
          angular.element($('.angrid-grid')).hide();
        }
      };
    }
  ]);

<script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>

<div ng-app="demo" ng-controller="demoCtrl">
  <div class="angrid">
    <div class="angrid-search"></div>
    <div class="angrid-grid-view">
      <div class="angrid-grid">Grid!</div>
    </div>
  </div>

  <button ng-click="testFn()">the code will work...</button>
</div>

顺便说一句，你提到：

angular.element($('.angrid-search')) comes back with undefined

如果是这样，那么显然隐藏东西是行不通的。您可能应该问另一个问题，并提供足够的信息来从头开始重现该问题场景，这样我们就可以提供帮助而无需借助猜测。

将范围隐藏在 angularJS

hiding the scope in angularJS

dotnetnuke

scope

angularjs