Question

所以我是 k 的新角色 ~~JS（1.6.4）。~~我有一个组件，我想使用控制器以编程方式隐藏/显示。不幸的是，我不明白如何抓住我的组件，然后将ng-hide设置为false。

现在，我的控制器通过服务调用看起来像这样。当数据返回时，我想运行我的隐藏/显示逻辑：

<div id="container" class="flex-container"><!-- flex container -->
  <div class="box" id="redbox" class="flex-item"><!-- flex item -->
    <input id="searchTermInput" class="search-input">
  </div>

  <div class="box" id="greenbox" class="flex-item"><!-- flex item -->
    <button id="searchButton" class="search-button" (click)="runSearch($event)">
    Search
    </button>
  </div>
  <hr width="100%" class="divider-line" ng-hide="dividerHider">
  <div class="flex-item search-results">
    <ul class="heroes">
      <li *ngFor="let result of searchResults">
        <span class="badge">{{result.id}}</span> {{result.title}}
      </li>
    </ul>
  </div>
</div>

import { Component } from '@angular/core';
import {SearchService} from "./search.service";
import {SearchResult} from "./search-result";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [SearchService]
})
export class AppComponent {
title = 'app';
searchResults: SearchResult[];
constructor(private searchResultService: SearchService) { }
runSearch(ev): void {
var q = 100;

this.searchResultService.getHeroesSlowly().then(searchResults => {
    this.searchResults = searchResults;
    alert("Hello! I am an alert box!!" + this.searchResults.length);

    //Call hide component here
  }
)
}

}

我已经完成了以编程方式隐藏事物的研究，但他们的代码似乎根本没有使用控制器。例如，在此响应中

AngularJS: ng-show / ng-hide

在这里

AngularJS - ng-hide with different ng-controller

我完全不知道有关“$ scope”的代码应该去哪里。

非常感谢任何帮助。

编辑：解决方案

我最终使用了这个结构。

...
<hr width="100%" id="divider" class="divider-line" *ngIf="showDivider">
...

export class AppComponent {
  showDivider = false;

  runSearch(ev): void {

    this.searchResultService.getHeroesSlowly().then(searchResults => {
        this.showDivider = true;
      }
    )
  }
}

Answer 1

似乎您的问题是如何在ES6中使用angular 1.6。也许这篇博客可以帮助您更好地理解如何使用es6为组件构建范围。

https://nazargargol.com/scope-watch-with-angular-es6-class/

对于手头的任务，我可以推测（我没有使用过es6语法，而你没有使用codepen示例），将代码更改为：

this.searchResultService.getHeroesSlowly().then(searchResults => {
    this.searchResults = searchResults;
    alert("Hello! I am an alert box!!" + this.searchResults.length);

    //Call hide component here
    this.scope.show_results = true;
  }
)

你的html：

<div class="flex-item search-results" ng-show="show_results">
    <ul class="heroes">
      <li *ngFor="let result of searchResults">
        <span class="badge">{{result.id}}</span> {{result.title}}
      </li>
    </ul>
  </div>

应该这样做（提供，ofc，默认情况下在构造组件时创建空作用域，并且可以向其添加'search_results'）。

通常，ng-hide，ng-show，ng-if使用$ scope中定义的变量/方法，因此您需要构造正确的范围。

Answer 2

您可以在第一次加载html内容时从角度代码添加变量语句，例如this.show_search = true;。然后进入searchResults，你可以改变这个变量（如果它可以从相同的js角度代码中读取），当你想要它改变时。我正在谈论类似下面的事情（让我们说你想要隐藏搜索div）：

<div class="box" id="redbox" class="flex-item" ng-show="show_search">
   <input id="searchTermInput" class="search-input">
</div>

然后在runSearch（）函数内部将此var更改为this.show_search = false;。然后，您要隐藏的html内容将不会显示。

另一个问题只是检查对象searchResults是否存在，并根据该对象显示您的内容：

<div class="box" id="redbox" class="flex-item" ng-hide="searchResults">
   <input id="searchTermInput" class="search-input">
</div>

上一个解决方案：您还可以将变量初始化为html内容（如果第一次html内容加载在搜索后没有与相同的角度代码进行通信），然后使用它与第一个解决方案的方式相同。如下所示：

<div id="container" class="flex-container" ng-init="show_search=true">
   <div class="box" id="redbox" class="flex-item" ng-show="show_search">
      <input id="searchTermInput" class="search-input">
   </div>
   .....
</div>

我的方法可能与您的代码存在差异，以防它不起作用，但这是主要的想法。因此，您可以检查如何根据您的结构进行调整。还要检查您的html内容是否与服务之外的适当的js角度控制器通信。这也将使您在设置新功能和变量时更轻松。

当然，您可以使用jquery，并从html内容中读取您的ID并隐藏它：$("#searchTermInput").hide();

Angular：隐藏控制器

2 个答案: