为何ng-if会导致侧边栏JavaScript脚本失效，而ng-show无此问题？

这个问题我之前在做AngularJS项目时也踩过坑，咱们从核心差异出发拆解原因，再给你对应的解决办法：

核心原因：DOM生成时机 + 作用域隔离 #

你已经知道ng-if和ng-show的本质区别，但具体到jQuery失效，主要是两个点：

1. DOM元素的存在时机不匹配 #

ng-show是页面初始化时就把元素渲染到DOM中，只是用display: none隐藏；而ng-if是当表达式为true时才动态创建DOM节点。

你的jQuery脚本大概率是在页面加载完成时（比如$(document).ready()、Angular的$onInit）就执行了，这时候ng-if的侧边栏还没被创建出来，脚本找不到对应的DOM节点，自然没法绑定事件或初始化交互逻辑。

举个典型的反例：

// 页面加载时执行，但此时ng-if的元素还不存在
$(document).ready(function() {
  $('.sidebar-toggle').click(function() {
    $('.sidebar').toggleClass('expanded');
  });
});

2. ng-if的子作用域与jQuery的冲突（次要） #

ng-if会创建一个独立的子作用域，而jQuery是直接操作DOM，不感知Angular的作用域。如果你的脚本依赖了作用域内的变量，或者初始化逻辑没考虑作用域变化，也可能出现异常，但这种情况不如时机问题常见。

解决办法（按Angular最佳实践排序） #

方法一：用自定义指令封装jQuery逻辑 #

这是最符合Angular设计思想的方式，指令会在DOM元素被创建时自动执行初始化逻辑：

angular.module('yourApp').directive('sidebarToggle', function() {
  return {
    link: function(scope, element) {
      // element就是指令绑定的DOM元素，此时一定存在
      element.click(function() {
        element.closest('.sidebar').toggleClass('expanded');
      });
    }
  };
});

然后在HTML中使用指令：

<div ng-if="isAuthenticated" class="sidebar">
  <button sidebar-toggle>展开/收缩</button>
  <!-- 侧边栏内容 -->
</div>

方法二：监听ng-if的触发状态，延迟执行脚本 #

在控制器中监听isAuthenticated变量，当它变为true时，确保DOM渲染完成后再执行jQuery逻辑：

angular.module('yourApp').controller('SidebarCtrl', function($scope, $timeout) {
  $scope.$watch('isAuthenticated', function(newVal) {
    if (newVal) {
      // $timeout确保DOM已经完成更新
      $timeout(function() {
        $('.sidebar-toggle').click(function() {
          $('.sidebar').toggleClass('expanded');
        });
      });
    }
  });
});

方法三：用事件委托快速修复 #

如果不想改架构，可以把事件绑定到始终存在的父元素上，利用事件冒泡处理动态创建的元素：

$(document).ready(function() {
  // 绑定到body或固定存在的父容器
  $('body').on('click', '.sidebar-toggle', function() {
    $(this).closest('.sidebar').toggleClass('expanded');
  });
});

这种方式简单快速，但不是Angular项目的最优解，适合临时修复。

内容的提问来源于stack exchange，提问作者Matheus Medeiros