javascript - Angular ui路线隐藏模式

如何在角度ui路线上使用ng-click关闭模态？

我有UI路由成角度的HTML文件：

 <div ui-view="modalView"></div>
 <div ui-sref="openModal">Open Modal</div>

这是我的配置：

$stateProvider.state('openModal', {
views: {
 'modalView': {

    templateUrl: "/partials/Modal.html"

}
     }

然后在我的Modal.html中，我有：

 <div style ="position:fixed; width:100%; heigth:100%; background-color:black;">
     //i want to click in this div and close the modal
            <div style = "position:relative; float:right;"><i class="fa fa-times fa" aria-hidden="true"></i></div>

 </div>

不使用jquery怎么办？

最佳答案

在您的模板文件Modal.html中添加点击事件

 <div style ="position:fixed; width:100%; heigth:100%; background-color:black;" [ngClass]="{'hide-class': highlightedDiv === 1 }>
    <div style = "position:relative; float:right;" (click)="toggleHighlight(1);"><i class="fa fa-times fa" aria-hidden="true"></i></div>
 </div>

在您的组件文件中添加功能toggleHighlight

toggleHighlight(newValue: number) {
  if (this.highlightedDiv !== newValue) {
    this.highlightedDiv = newValue;
  }
}

最后在CSS中添加

.hide-class { display: none; }

这可能会解决您的问题

关于javascript - Angular ui路线隐藏模式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42522642/