角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路径隐藏模式

回答

相关问题