角度ui路线隐藏模式

Question

如何在Angular 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怎么办？

Answer 1

在您的模板文件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; }

这可能会解决您的问题

Answer 2

由于您使用的是路由器，因此您可能正在寻找使用路由器的解决方案。 您可以侦听路由器的$ stateChangeSuccess事件，以保存先前的状态并在用户单击div关闭模式时过渡到该状态：

在应用程序根控制器中监听$ stateChangeSucces事件：

app.controller('AppController', function($state, $rootScope) {      
    $rootScope.previousState;       
    $rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
        $rootScope.previousState = from.name;
        console.log("prev state: ", $rootScope.previousState);
    });
});

在模态控制器中，您将拦截点击并转到先前保存的先前状态：

app.controller('ModalController', function($state, $scope, $rootScope) {
    $scope.closeModal = function() {
        $state.transitionTo($rootScope.previousState || 'root');
    };
});         

您的模态模板应如下所示：

<div style ="position:fixed; width:100%; heigth:100%; background-color:black;">
    <div ng-click="closeModal() "style = "position:relative; float:right;"><i class="fa fa-times fa" aria-hidden="true"></i></div>
</div>

设置openModal状态时，请不要忘记将ModalController和模态模板相关联