在Pug(Jade)与AngularJS中基于ng-if渲染不同局部视图的实现方法

嘿，这个需求我之前也碰到过！直接在ng-if里用三元表达式加载Pug文件的写法是行不通的，但确实有几种比把整段代码塞进ng-if里更简洁的实现方式，给你整理两个最实用的方案：

方案1：用ng-include直接结合条件表达式 #

这是最直接的方式，Angular的ng-include指令本身就支持动态绑定模板路径，你可以直接把条件判断写在指令的表达式里：

// 父模板中
div(ng-include="booleanVar ? 'path/to/pugFile1.pug' : 'path/to/pugFile2.pug'")

⚠️ 注意：要确保你的Pug文件已经被正确编译（比如通过构建工具转成HTML），并且路径是Angular能访问到的（可以是相对路径，也可以是已经存入模板缓存的键名）。

方案2：封装成指令/组件（推荐复用场景） #

如果这两个Pug模板以后可能在其他地方复用，或者本身包含一些交互逻辑，把它们封装成Angular指令（AngularJS 1.x）或组件（Angular 2+）会更优雅：

以AngularJS 1.x为例，定义两个指令： #

angular.module('yourAppName')
  .directive('pugFile1', function() {
    return {
      restrict: 'E',
      templateUrl: 'path/to/pugFile1.pug'
    };
  })
  .directive('pugFile2', function() {
    return {
      restrict: 'E',
      templateUrl: 'path/to/pugFile2.pug'
    };
  });

然后在父模板中用ng-if切换： #

// 父模板中
pug-file1(ng-if="booleanVar")
pug-file2(ng-if="!booleanVar")

这种方式不仅让父模板更干净，还能把模板相关的逻辑封装在指令/组件里，维护起来更方便。

不推荐的方案：ng-bind-html动态渲染 #

虽然可以通过构建工具把Pug转成HTML字符串，再用ng-bind-html结合$sce.trustAsHtml渲染，但这种方式需要处理HTML信任问题，而且模板的复用性和可维护性都很差，除非特殊场景，不建议使用。

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