如何在角度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的情况下执行此操作?
答案 0 :(得分: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; }
这可能会解决您的问题
答案 1 :(得分:0)
由于您使用的是路由器,因此您可能正在寻找使用路由器的解决方案。您可以收听路由器的$ stateChangeSuccess事件以保存以前的状态,并在用户单击div关闭模式时转换到该状态:
收听app根控制器中的$ 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和模态模板