【问题标题】:AngularJS not routing properly when link is passed from function从函数传递链接时AngularJS没有正确路由
【发布时间】:2016-09-30 09:46:02
【问题描述】:

我正在学习 Angular,所以这是我的测试应用程序:http://enrolin.in/test/#/students

现在我想按名称搜索数据库。所以我创建了完全返回我需要的 php。这是php:http://enrolin.in/test/login.php?p=fetchbyname&&name=ak 您必须将 url 中的名称替换为您需要搜索的任何内容。我还创建了一个返回绝对正确结果的部分页面,这是页面:http://enrolin.in/test/#/studentSearch/ak 到目前为止一切都很好但是问题出在:

当我尝试在 http://enrolin.in/test/#/students 中搜索时,angularJS 不会将我路由到类似 http://enrolin.in/test/#/studentSearch/ak 的位置 但改为我在$routeProvider中设置的默认值

这是我的 angularJS(我删除了一些不重要的代码):

var app = angular
        .module("Demo", ["ngRoute"])
        .config(function ($routeProvider) {
            $routeProvider


                .when("/students/:id", {
                    templateUrl: "templates/studentDetails.html",
                    controller: "studentDetailsController"
                })
                .when("/studentSearch/:name", {
                    templateUrl: "templates/studentSearch.html",
                    controller: "studentSearchController"
                })
                .otherwise({
                    redirectTo: "/home"
                })

        })

        .controller("studentDetailsController", function ($scope, $http, $routeParams) {
            $http({
                url: "http://enrolin.in/test/login.php?p=fetchone&&id=",
                method: "get",
                params: { id: $routeParams.id }
            }).then(function (response) {
                $scope.stud = response.data;

            })
        })
.controller("studentsController", function ($scope, $http, $route,$location) {
            $scope.searchStudent=function(){
                if($scope.name){
                    $location.url("/studentsSearch/" + $scope.name);
                }
                else{
                    $location.url("/studentsSearch/");
                }
            }

            $scope.reloadData=function(){
                $route.reload();
            }
             $http.get("http://enrolin.in/test/login.php?p=fetchall")
                                    .then(function (response) {
                                        $scope.students = response.data;
                                    })
         })
        .controller("studentSearchController", function ($scope, $http, $routeParams) {
            if($routeParams.name)
            {
            $http({
                url: "http://enrolin.in/test/login.php?p=fetchbyname&&name=",
                method: "get",
                params: { name: $routeParams.name }
            }).then(function (response) {
                $scope.studs = response.data;

            })
        }
        else
        {
            $http.get("http://enrolin.in/test/login.php?p=fetchall")
                                    .then(function (response) {
                                        $scope.students = response.data;
                                    })
        }
        })

以前每次我想在 html 中添加一个链接到我曾经写过的路由,比如<a href="#/courses">courses</a> 但是现在当我想把它放在函数中时,我不知道该写什么。请帮忙。

【问题讨论】:

    标签: javascript php angularjs routing


    【解决方案1】:

    我认为您可以使用 window.location.href 而不是标签来重定向。或者你可以使用“hash state”来控制你的路由器在func中

    【讨论】:

    • 您好 FlowerChng,感谢您的回复。但是我对 Angular 很陌生,你能告诉我如何编写该代码吗?
    • 嗨@akhilesh-khajuria,本机javascript window.location.href="YOUR URL" 可以工作。顺便说一句,我更喜欢使用 angular-ui-router,它是配置和控制路由器的更好方法。
    【解决方案2】:

    您使用的名称与您在路由配置中提到的名称不同。路由名称是“/studentSearch/:name?”但是你在函数中使用了“/studentsSearch/”。

    请尝试将$location.url("/studentsSearch/" + $scope.name); 替换为$location.path("/studentsSearch/" + $scope.name);

    更正命名问题,它应该可以工作。

    我试过了,效果很好。

    【讨论】:

    • 你好,奥沙达。我刚刚尝试了您的修复,但它不起作用。而且 studentDetails 部分没有问题,我认为它是 studentSearch 部分。
    • 嗨@AkhilEshKhajuria,请尝试替换 $location.url("/studentsSearch/" + $scope.name); with $location.path("/studentsSearch/" + $scope.name);
    • 我想我没有得到这个问题。你能详细说明一下吗?尝试我在之前的评论解决方案中建议的内容:when("/studentSearch/:name?", { templateUrl: "templates/studentSearch.html", controller: "studentSearchController" })
    • Oshadha,我刚刚又在这里问了这个问题:stackoverflow.com/questions/37565899/… 看看有没有帮助
    猜你喜欢
    • 2016-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-03
    • 2012-03-14
    • 1970-01-01
    • 2018-05-28
    • 1970-01-01
    相关资源
    最近更新 更多