AngularJS 1.6.10控制器数据无法在templateUrl视图中显示的问题

从AngularJS 1.3.15升级到1.6.10后出现这个问题，主要有两个常见的核心原因，我来逐一拆解分析：

1. 路由哈希前缀的默认规则变更 #

AngularJS 1.6.0开始，官方把路由的默认哈希前缀从空字符串改成了**!**。也就是说，在1.6.x版本中，你的产品页面URL需要从旧格式#/product/1改成#!/product/1，才能正确匹配到/product/:id的路由规则。

如果你的页面还是沿用旧URL访问，Angular会匹配不到对应的路由规则，自动执行otherwise里的重定向逻辑跳转到/home，但你并没有配置/home的路由，这就导致product控制器根本没被初始化，$scope.product自然没有值，所以{{product}}无法显示内容——而且因为路由跳转本身没有抛出错误，控制台也不会有任何提示。

解决办法： #

你有两种选择：

• 调整访问URL：直接使用#!/product/[产品ID]的格式打开产品页面；
• 恢复旧的哈希前缀：在app.config中添加一行配置，把哈希前缀改回空字符串，这样就能继续用旧URL访问：

  app.config(['$routeProvider','$httpProvider','$locationProvider',function($routeProvider, $httpProvider, $locationProvider){
    // 恢复AngularJS 1.3的哈希前缀规则
    $locationProvider.hashPrefix('');
    
    // 你的原有路由配置
    $routeProvider.when('/products', { controller: 'products', templateUrl: 'partials/products.html' });
    $routeProvider.when( '/product/:id' , { controller: 'product', templateUrl : 'partials/product.html' });
    $routeProvider.otherwise({ redirectTo: '/home' });
  }]);
  

2. File协议下的$http请求安全限制 #

你提到项目部署在本地电脑、未使用localhost，也就是直接通过file://协议打开HTML文件。AngularJS 1.6.x版本默认加强了安全策略，阻止了file://协议下的$http请求，这会导致你的控制器无法加载model/products.json文件，进而无法给$scope.product赋值。

这种请求拦截通常不会在控制台抛出明显的错误（不同浏览器表现略有差异），所以你看不到报错，但数据确实没加载进来，最终导致{{product}}无内容显示。

解决办法： #

• 推荐：改用本地服务器运行：用简单的本地服务器来托管项目，比如Node.js的http-server、Python的python -m http.server，这样就能通过http://localhost:[端口]访问项目，彻底避开file://的安全限制；
• 临时方案（不推荐）：如果你一定要用file://协议，可以在$httpProvider中删除默认的跨域请求头，尝试绕过限制（但部分浏览器可能仍然无效，且有安全风险）：

  app.config(['$routeProvider','$httpProvider',function($routeProvider, $httpProvider){
    // 移除X-Requested-With头，允许file协议下的请求
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    
    // 你的原有路由配置
  }]);
  

额外调试建议 #

你可以在product控制器的回调中添加日志，快速定位问题：

controllers.controller('product',[ '$scope' , '$http' , '$routeParams' ,function($scope, $http, $routeParams){
    $http({ method: 'GET', url: 'model/products.json' }).then(function successCallback(response) {
        console.log('数据加载成功:', response.data);
        console.log('当前路由参数ID:', $routeParams.id);
        $scope.product = response.data[$routeParams.id];
    }, function errorCallback(response) {
        console.error('数据加载失败:', response);
        $scope.product = 'Error downloading data...';
    });
}]);

通过控制台日志，你可以直观看到数据是否加载成功、路由参数是否正确获取，帮助你快速确认问题根源。

内容的提问来源于stack exchange，提问作者Paweł Stanecki