如何不通过href触发CSS模态框？避免URL变更及页面刷新

这个问题在Angular应用里挺常见的——当你用传统的href="#xxx"方式触发CSS模态框时，Angular的路由系统会把这个锚点当成路由导航的一部分，从而导致URL变化甚至页面刷新；而演示环境（比如Plunker）因为没有复杂的路由配置，所以不会出现这个问题。我给你几个可行的解决方案：

方案1：阻止a标签的默认行为 #

直接在点击事件里阻止浏览器的默认锚点跳转行为，同时保留模态框的显示逻辑：

修改HTML代码 #

<div ng-controller="demoCtrl">
  <a href="#" ng-click="toggleModal(true, $event)">Open Modal</a>
  <div id="openModal" class="modalDialog">
    <a class="fullSizeBlock" href="#" ng-click="toggleModal(false, $event)"></a>
    <div class="content">
      <a href="#" ng-click="toggleModal(false, $event)">X</a>
      <h1>Modal Box</h1>
      <button ng-click="changeState()">Show Client</button>
      <div ng-if="client.state">{{client.name}}</div>
    </div>
  </div>
</div>

在Controller中添加逻辑 #

angular.module('yourApp').controller('demoCtrl', function($scope) {
  $scope.toggleModal = function(isOpen, event) {
    // 阻止默认的锚点跳转行为
    event.preventDefault();
    var modalEl = document.getElementById('openModal');
    if (isOpen) {
      modalEl.classList.add('show'); // 假设你的CSS用.show类控制模态框显示
    } else {
      modalEl.classList.remove('show');
    }
  };

  // 你的原有业务逻辑
  $scope.client = { state: false, name: 'Test Client' };
  $scope.changeState = function() {
    $scope.client.state = !$scope.client.state;
  };
});

方案2：用Angular双向绑定控制模态框（更推荐） #

完全抛弃锚点触发的方式，改用Angular的ng-show/ng-if结合scope变量来控制模态框的显示，这更符合Angular的MVVM思想：

修改HTML代码 #

<div ng-controller="demoCtrl">
  <a href="#" ng-click="isModalOpen = true; $event.preventDefault()">Open Modal</a>
  <div id="openModal" class="modalDialog" ng-show="isModalOpen">
    <a class="fullSizeBlock" href="#" ng-click="isModalOpen = false; $event.preventDefault()"></a>
    <div class="content">
      <a href="#" ng-click="isModalOpen = false; $event.preventDefault()">X</a>
      <h1>Modal Box</h1>
      <button ng-click="changeState()">Show Client</button>
      <div ng-if="client.state">{{client.name}}</div>
    </div>
  </div>
</div>

在Controller中添加控制变量 #

angular.module('yourApp').controller('demoCtrl', function($scope) {
  $scope.isModalOpen = false; // 控制模态框显示的核心变量

  // 你的原有业务逻辑
  $scope.client = { state: false, name: 'Test Client' };
  $scope.changeState = function() {
    $scope.client.state = !$scope.client.state;
  };
});

额外说明 #

如果你的应用配置了$locationProvider.html5Mode(true)，锚点行为会和传统浏览器差异更大，这时候上面的方案依然有效——核心就是不要让Angular把你的锚点当成路由指令，要么阻止默认行为，要么用Angular自身的视图控制逻辑。

内容的提问来源于stack exchange，提问作者N.Car