角ui路徑隱藏模式

如何關閉角度ui路由上的模式，使用ng-click？角ui路徑隱藏模式

我有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的情況下做到這一點？

來源

2017-03-01 John

在你模板文件Modal.html添加click事件

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

.hide-class { display: none; }

這可能會解決您的問題

來源

2017-03-01 03:44:52

好的，謝謝你。 – John

由於您使用路由器，你可能會尋找使用路由器的解決方案。你可以聽路由器的$ 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和模板模板

來源

2017-03-01 08:56:16 Faly

角ui路徑隱藏模式

回答

相關問題