AngularJS中[$injector:unpr]错误解析及页面跳转异常排查

核心原因分析 #

出现[$injector:unpr]错误、控制器未触发、Angular功能失效的核心原因：

• 原控制器为模态框场景设计，依赖$modalInstance服务，但改为独立页面路由后，该服务不存在，直接导致控制器初始化失败，引发后续所有Angular功能异常。
• 跳转链接使用硬刷新方式，未通过Angular路由机制处理，导致路由状态未正确更新。

具体修复步骤 #

1. 移除控制器中无效的$modalInstance依赖 #

修改控制器代码，删除注入数组和函数参数中的$modalInstance（同时同步移除原代码中依赖该服务的逻辑）：

(function (define, angular, $, _) {
    'use strict';
    define(
        ["appControllers"]
        ,function (controllers) {
            controllers.controller('app.cebmHelpDocument', [
                '$scope',
                '$timeout',
                '$filter',
                'PDFFileService',
                function (
                    $scope,
                    $timeout,
                    $filter,
                    PDFFileService
                ) {
                    // 原依赖$modalInstance的代码需同步移除或调整
                    ...
                }
            ]);
            return controllers;
        }
    );
}(define, angular, jQuery, _));

2. 使用Angular路由方式跳转（替换硬链接） #

因为使用ui-router的$stateProvider，改用ui-sref指令实现跳转，避免页面硬刷新：

<a ui-sref="application.cebmHelpDocument">
    <i id="help-icon" class="fa fa-question-circle"></i>
</a>

如果必须使用href，可写相对哈希路径并阻止默认刷新：

<a href="#/helpDocument" ng-click="$event.preventDefault(); $state.go('application.cebmHelpDocument')">
    <i id="help-icon" class="fa fa-question-circle"></i>
</a>

3. 验证控制器与路由的加载配置 #

• 确认appControllers模块已在主应用模块中依赖注入：

  angular.module('yourMainApp', ['appControllers', 'ui.router']);
  

• 检查templateUrl路径是否正确，通过浏览器网络面板确认模板文件能正常加载。
• 确认控制器的define模块已被正确加载（若使用requireJS，需保证该文件在路由触发前已加载完成）。

额外排查点 #

• 刷新页面后Angular功能仍失效：检查主页面的ng-app指令是否正确挂载，确认路由容器（如<div ui-view></div>）存在且位置正确。
• 若仍有注入错误：查看控制台错误详情，定位未找到的依赖项，逐一排查服务的定义与注入逻辑。

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