角度ui路线隐藏模式

Question

How can I close a modal, with ng-click on angular ui route?

I have this HTML file with UI route angular:

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

And this is my config:

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

    templateUrl: "/partials/Modal.html"

}
     }

And then in my Modal.html I have:

 <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>

How can I do this without using jquery?

Answer 1

In your template file Modal.html add a click event

 <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>

In your component file add the function toggleHighlight

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

And finally in CSS add

.hide-class { display: none; }

This will probably solve your issue

Answer 2

Since you are using router, You may be looking for a solution using router. You can listen to router's $stateChangeSuccess event to save previous state and transition to it when user click the div to close the modal:

Listen to the $stateChangeSucces event in the app root controller:

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);
    });
});

In the controller of your modal, you intercept the click and go to the previously saved previous state :

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

Your modal's template should looks like:

<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>

Don't forget to associate the ModalController and modal template when setting openModal state