角度重定向到其他方式而不检测视图，但当我单击后退按钮时它可以工作

Angular redirecting to otherwise without detecting view but it works when i click back button

本文关键字：单击 按钮 工作 其他 重定向 方式 视图 检测      更新时间：2023-09-26

更新下面的答案或评论都没有帮助，我希望有人能给我正确的答案。

当我把这个网址放在我的浏览器中时 - 它带我查看我的水果并完美运行，

http://localhost:53052/AppTest.aspx#/fruits

但是当我转到我的home view并单击按钮并尝试导航到'fruits'视图时，它会将我重定向到http://localhost:53052/AppTest.aspx#/routeNotFound

但是当我单击浏览器的后退按钮时，它会返回到水果视图，然后如果我再次单击，它会返回到主视图。

所以这是树视图中发生的情况，

-

-> 单击主视图按钮(应导航到fruits view，但它转到routeNotFound视图(

-

-> 当我单击浏览器上的后退按钮时，它会转到fruits view，然后如果我再次单击返回，它会转到Home view

这是我的路线，

(function () {
    'use strict';
    var app = angular.module('fruitApp');
    app.constant('routes', getRoutes());
    app.config(['$routeProvider', 'routes', routeConfigurator]);
    function routeConfigurator($routeProvider, routes) {
        routes.forEach(function (route) {
            $routeProvider.when(route.url, route.config);
        });
        $routeProvider.otherwise({ redirectTo: '/routeNotFound' });
    }
    function getRoutes() {
        return [
          {
              url: '/home',
              config: {
                  templateUrl: 'App/templates/home.html',
              }
          },
          {
              url: '/fruits',
              config: {
                  templateUrl: 'App/templates/fruits.html',
              }
          }
        ];
    }
})();

主视图(我只用它来加载模块并将其他视图加载到其中(

   <div data-ng-app="fruitApp">
        <div data-ng-view="">
        </div>
    </div>

主页视图

<div data-ng-controller="home as vm">
     <div data-ng-click="vm.goToFruits()">click Me!</div>
</div>

家庭控制器

(function () {
    'use strict';
    var controllerId = "home";
    angular.module('fruitApp').controller(controllerId,
        ['$location', 'datacontext', home]);
    function home($location, datacontext) {
        var vm = this;
        vm.goToFruits = goToFruits;
        function goToFruits() {
            $location.path('/fruits');
        }
    };
})();

水果景观

<div data-ng-controller="fruits as vm"> fruits </div>

水果控制器

(function () {
    'use strict';
    var controllerId = "fruits";
    angular.module('fruitApp').controller(controllerId,
        ['$location', 'datacontext', fruits]);
    function fruits($location, datacontext) {
        var vm = this;
    };
})();
我

正在关注这个项目，所以如果我没有错过任何概念，像我一样定义模块应该不是问题吗？

https://github.com/OfficeDev/Learning-Path-Manager-Code-Sample/blob/master/App/learningPath/learningPaths.js

编辑

我尝试更改路由配置和控制器中的一些代码以使用ui-route现在它将我带到水果视图(就像以前一样(，但它不再将我重定向到"否则"路由，但它仍然将 URL 更改为 /routeNotFound..

更新

我最终使用 href 和 ng-href 来切换视图。

你的例子中有很多"绒毛"。我已经剥离了一些内容，您应该能够在此处看到 plunkr 演示 - 它有助于查看您是否在没有框架的情况下运行它 - http://run.plnkr.co/plunks/40eDlZfZQnAJRWxeg1ge/# 。

对我来说，它看起来工作得很好。我可以单击文本导航到"水果"控制器，然后按浏览器中的"返回"按钮返回"主页"。

关于代码的一些事项：

  1. 需要使用 app.module('fruitsApp', ['ngRoute']); 声明 app.module，以确保加载依赖项。
  2. 我删除了您的示例代码不需要知道的"数据上下文"等
  3. 我在路由中使用基本模板而不是模板 URL。
  4. 我已将默认路由重定向到'/home' - 这在您的上下文中有意义吗？

我给你的建议是删除你的代码片段，直到它开始工作，然后使用它来找出导致问题的确切原因。

我建议你走简单，首先使用函数路由和所需的依赖项来构建你的应用程序，然后再进行扩展和增强。你犯的一个大错误是你没有在你的水果应用程序中包含">ngRoute"。工作示例，您可以查看此 plunker ng 路由示例

(function () {
    'use strict';
    var app = angular.module('fruitsApp', ['ngRoute']);
    app.constant('routes', getRoutes());
    app.config(['$routeProvider', 'routes', routeConfigurator]);
    function routeConfigurator($routeProvider, routes) {
        routes.forEach(function (route) {
            $routeProvider.when(route.url, route.config);
        });
        $routeProvider.otherwise({ redirectTo: '/home' });
    }
    function getRoutes() {
        return [
          {
              url: '/home',
              config: {
                  templateUrl: 'home.html',
                  controller:'home'
              }
          },
          {
              url: '/fruits',
              config: {
                  templateUrl: 'fruit.html',
                  controller:'fruits'
              }
          }
        ];
    }
    app.controller("home", ['$location',
      function($location) {
          this.goToFruits = function() {
              $location.path('/fruits');
          };
      }
    ]);
    app.controller("fruits", ['$scope', '$route', '$routeParams','$location', 
      function($scope, $route, $routeParams, $location) {
        $scope.fruitList = [
          {name:'Apple'},
          {name:'Apricot'},
          {name:'Banana'},
          {name:'Banana'},
          {name:'Bilberry'},
          {name:'Blackberry'} ];
          $scope.goBackHome= function(){
             $location.path('/home');
          };
      }
    ]);
})();
相关文章：