组件内使用ng-include嵌套模板失效问题求助

算力阿峰

2026-5-25

解决ng-include显示undefined的问题

我来帮你排查下这个ng-include加载失败显示的问题，大概率是路径或者安全配置的问题，给你几个具体的排查和解决方向：

先检查路径是否正确
你用的'/DE/de/test.html'是绝对路径（斜杠开头），这个路径是从服务器的根目录开始查找的，如果你的项目不是部署在服务器根目录，或者本地开发的根目录匹配不上，就会找不到文件。建议换成相对路径试试，比如'./DE/de/test.html'（因为你的template.html在根目录，相对路径是从当前文件出发定位DE文件夹）。另外还要注意路径的大小写，Linux或部分服务器是区分大小写的，要确保DE、de和实际文件夹名称完全一致。

确认AngularJS的安全策略是否限制了模板加载
AngularJS默认会通过$sce服务限制不安全的资源加载，如果你的模板路径被判定为不安全，也会加载失败。可以在应用配置里添加信任规则：

angular.module('yourAppName', [])
  .config(function($sceDelegateProvider) {
    // 允许加载当前域名下的所有资源，或者指定具体路径
    $sceDelegateProvider.resourceUrlWhitelist([
      'self',
      '**/DE/de/test.html'
    ]);
  });

尝试用scope变量绑定路径的方式加载
把模板路径放到控制器的scope变量里，这样更容易排查路径是否正确。比如在控制器里定义：
```
angular.module('yourAppName').controller('YourController', function($scope) {
  $scope.testTemplateUrl = './DE/de/test.html';
});
```
然后在模板里改成：
```
<ng-include src="testTemplateUrl"></ng-include>
```
如果这样还是不行，可以在控制台打印testTemplateUrl确认路径是否正确，或者用浏览器的网络面板查看是否有404请求，这样就能明确是路径问题还是其他问题了。