Question

学习Angular并遇到一个问题我似乎无法找到一个好的＆＃34;回答。我一直关注official Tutorial，并且正在开展一个与我正在进行的项目相似的设置。

$ routeProvider。当手机详细信息的情况下，根据手机列表页面中点击的手机名称获取特定的.JSON文件。问题是，如果您输入的电话名称中没有与之关联的.JSON文件，则路线仍会继续显示并显示空白页面。我试图找出如何防止这种情况。

我已经到了为路线添加决心。但是，我只能阻止视图更改或使用$ location.path重定向。这些都不是理想的。

如何展示＆＃34; 404页面＆＃34;查看没有JSON文件的手机？在我的脑海中，如果GET请求以404响应，我会显示不同的templateUrl，但似乎无法使其正常工作。

任何帮助都会很棒！

以下是我到目前为止所获得的代码：

我的路线处理。

.when('/game/:Game', {
    templateUrl: 'views/game-detail.html',
    controller: 'GameDetailCtrl',
    resolve: {
      myData: ["Games", "$location", "$q", "$timeout",'$rootScope', function(Games, $location, $q, $timeout,$rootScope) {
        var def = $q.defer();

        var path = $location.path().toString().substring(6);

          // Games service
         Games.get({gameName: path}, function(game, s) {

          }).$promise.then(
            function(data) {
              // found game data 
              def.resolve(data);
            },
            function(error) {
              // couldn't find JSON file
              def.reject(error);
            }
          );

        return def.promise;
      }]
    }
  }).when('/pageNotFound', {
    templateUrl: 'views/error.html'
  })

Root Scope路由更改错误监听器：

 $rootScope.$on("$routeChangeError",
  function(event, current, previous, rejection) {
    console.log("failed to change routes");
    //$location.path('/pageNotFound');
  });

Answer 1

嗯，你真的不这样做，在这种情况下你要做的就是让你的模板HTML包含成功和失败场景的模板以及翻转状态内的ng-switch当呼叫失败或成功时。

此外，我认为如果你试图从指令中复制这个想法也会有效： Angular.js directive dynamic templateURL

Answer 2

您可以尝试使用以下代码更改路径：

        function(error) {
          // couldn't find JSON file
          $location.path('/pageNotFound');
        }

如何使失败的路由解析承诺加载不同的模板URL？

2 个答案: