AngularJS项目ng-include加载模板内ng-if不生效问题求助

核心问题排查 #

1. 模板作用域引用错误 #

AngularJS模板中没有内置$rootScope变量，你在subnavbar.html里写的ng-if="$rootScope.adminSection"永远会判定为false，这是最主要的原因。
模板内访问根作用域挂载的属性有两种写法：

• 直接写属性名：ng-if="adminSection"（子作用域会自动继承$rootScope上挂载的属性）
• 显式指定根作用域：ng-if="$root.adminSection"（避免子作用域同名变量覆盖，更稳妥）

修改subnavbar.html中对应代码即可生效。

2. 低版本AngularJS生命周期兼容问题 #

$onInit是AngularJS 1.5+版本才支持的控制器生命周期钩子，如果你维护的项目用的是1.5以下的旧版本，这段接口请求代码根本不会执行，自然不会给$rootScope.adminSection赋值。
解决方法：把请求逻辑从vm.$onInit中移出，直接写在控制器函数体内即可：

controller: ['$rootScope', 'AdministratorService', function ($rootScope, AdministratorService) {
    AdministratorService.getAdminSection().then(function (result) {
        // 注意确认接口返回结构，如果是标准响应包，需要取result.data
        $rootScope.adminSection = result;
    })
}]

3. 可选优化：提前初始化变量 #

可以在app.js的run块中提前给$rootScope的属性设置默认值，避免页面加载初期变量未定义导致的闪现问题：

app.run(['$rootScope', function($rootScope) {
    $rootScope.adminSection = false;
}])

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