javascript - AngularJS 路由参数

转载作者：可可西里更新时间：2023-11-01 02:26:03

我不明白为什么，但是当我对 box 和 box.color 进行 console.log() 时，它告诉我它未定义...我尝试了很多不同的方法来解决这个问题，但都失败了。

Cloud9

Plunker

这是 script.js:

var app = angular.module('LoginApp', ["firebase", "ngRoute", "ngCookies"])


app.provider("box", function ()
{
    var hex = "SomeColor";
    var UID = 3;
    return {
        setColor: function (value)
        {
            UID = value
        },
        $get: function ()
        {
            return {
                color: hex
            }
        }
    }
})

app.config(function ($routeProvider, $cookiesProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'HtmlFiles/registration.html',
        controller: 'regController'
      })
     .when('/logIn', {
        templateUrl: 'HtmlFiles/login.html',
        controller: 'loginController'
      })

      .when('/Chat', {
        templateUrl: 'HtmlFiles/Chat.html',
        controller: 'chatController'

      })
      .when('/Test' , {
        template: '<h3>This is just a testing phase</h3>',
        controller: 'Testing'
      })

      .when('/userSettings', {
        templateUrl: 'HtmlFiles/userSettings.html',
        controller: 'userSettingsController'

      })

      .when('/room', {
        templateUrl: 'HtmlFiles/room.html',
        controller: 'roomController'
      })

      .otherwise({
        redirectTo: '/'
      }); 
});

app.controller('Testing', ["$scope","roomService", "roomProvider",  function($scope, roomService, roomProvider){
  console.log("This is from the Controller Service: " + roomService.room.roomUID)
  console.log("This is from the Controller Provider: " + roomProvider.$get)
  }
])
app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    var ref = new Firebase("https://chattappp.firebaseio.com/");
    return $firebaseAuth(ref);
  }
]);

app.factory("Ref", function(){
   var ref = new Firebase("https://chattappp.firebaseio.com/")
   return ref;
})

app.factory("UniPosts" , function(){
  var ref = new Firebase("https://postss.firebaseio.com/")
   return ref;
});

app.service('getCookieService', ["$cookieStore", "$scope", 
          function($cookieStore, $scope){
            this.getCookie = function(name){
              $cookieStore.get(name)
            }
          }
    ])

房间 Controller .js:

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http",
    function($scope, Auth, Ref, AuthService, roomService, $http,box) {
    // Sweet Alert :)
     function generateRandomStringToken(length) {
            var string = "";
            var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < length; i++){
                string += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return string;
        }

        swal({
            title: "Room",
            text: "What do you want your room name to be?",
            type: "input",
            showCancelButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "Write something"
        }, function(inputValue) {
            if (inputValue === false) return false;
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
            swal("Nice!", "You wrote: " + inputValue, "success");
             $scope.$apply(function () {
            $scope.roomNameModel = inputValue
            });

           console.log($scope.roomNameModel)
    var redirectPage = generateRandomStringToken(10)
     console.log("User gets redirected to : " + redirectPage + " ...")
     roomService.setRoomUID(redirectPage);
     console.log(roomService.room.roomUID)
     console.log(box) //Undefined...
     console.log("From Provider : " + box.color)//box.color is undefined..


        });




    }
])
    //window.location.hash = "/Test"

编辑 2

:好的，现在它可以工作了，但我对如何在 app.config 上使用它感到困惑。我我的提供商是 Hash:

app.provider("Hash", function ()
    {
        var UID = 0;
        return {
            $get: function ()
            {
                return {
                    setHash: function (value)
                    {
                        UID = value;
                    },
                    getHash: function()
                    {
                        return UID;
                    }
                }
            }
        }
    })

当它转到 Controller 时，我设置哈希并获取 has ... roomControler.js:

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "Hash",
        function($scope, Auth, Ref, AuthService, roomService, $http,Hash) {
    // Sweet Alert :)
     function generateRandomStringToken(length) {
            var string = "";
            var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < length; i++){
                string += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return string;
        }

        swal({
            title: "Room",
            text: "What do you want your room name to be?",
            type: "input",
            showCancelButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "Write something"
        }, function(inputValue) {
            if (inputValue === false) return false;
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
            swal("Nice!", "You wrote: " + inputValue, "success");
             $scope.$apply(function () {
            $scope.roomNameModel = inputValue
            });

           console.log($scope.roomNameModel)
    var redirectPage = generateRandomStringToken(10)
     console.log("User gets redirected to : " + redirectPage + " ...")
     roomService.setRoomUID(redirectPage);
     console.log(roomService.room.roomUID);
     Hash.setHash(redirectPage);
     console.log("From Provider : " + Hash.getHash())
    window.location.hash = "/Test"
        });




    }
])

现在我想做的是在我的 app.config() 中，我想说什么时候在 Hash.getHash() 中转到模板:和 Controller :

所以像这样....

    app.config(function ($routeProvider, $cookiesProvider, Hash) {
        $routeProvider.
         when('/' + Hash.getHash(), {
               template: '<h4> Your in Room',
               controller: 'Test
                })
});

app.controller('Testing', ["$scope","roomService","Hash",function($scope, roomService, Hash){
  console.log("This is from the Controller Service: " + roomService.room.roomUID)
  console.log(Hash.getHash())//This Logs right. :D
  }
])

编辑 3

我之前想说的是，我想以某种方式在我的 app.config() when 语句中配置随机生成的哈希。所以在我的 app.config 中。当用户在/RANDOMLYGENERATEDHASH 时有一个模板:'<h1>Test</h1>'。这是我尝试过的方法，但确实有效...

这是 .when() 语句中的第四个..

app.config(function ($routeProvider, $cookiesProvider, HashProvider){
    $routeProvider
      .when('/', {
        templateUrl: 'HtmlFiles/registration.html',
        controller: 'regController'
      })
     .when('/logIn', {
        templateUrl: 'HtmlFiles/login.html',
        controller: 'loginController'
      })

      .when('/Chat', {
        templateUrl: 'HtmlFiles/Chat.html',
        controller: 'chatController'

      })
      .when('/' + HashProvider , {
        templete: '<h1>Test</h1>'
      })
      .when('/userSettings', {
        templateUrl: 'HtmlFiles/userSettings.html',
        controller: 'userSettingsController'
      })
      .when('/room', {
        templateUrl: 'HtmlFiles/room.html',
        controller: 'roomController'
      })

      .otherwise({
        redirectTo: '/'
      }); 
});

现在是提供者..

app.provider("Hash", function ()
{
    var UID = 0;
    var _getHash = function()
    {
        return UID;
    };
    return {
        getHash: _getHash,
        $get: function ()
        {
            return {
                setHash: function (value)
                {
                    UID = value;
                },
                getHash: _getHash
            }
        }
    }
})

编辑 4

好的，现在这是我的 roomcontroller.js..:( Controller 底部的重要细节)

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "Hash","$routeParams",
        function($scope, Auth, Ref, AuthService, roomService, $http,Hash, $routeParams) {
    // Sweet Alert :)
     function generateRandomStringToken(length) {
            var string = "";
            var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < length; i++){
                string += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return string;
        }

        swal({
            title: "Room",
            text: "What do you want your room name to be?",
            type: "input",
            showCancelButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "Write something"
        }, function(inputValue) {
            if (inputValue === false) return false;
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
            swal("Nice!", "You wrote: " + inputValue, "success");
             $scope.$apply(function () {
            $scope.roomNameModel = inputValue
            });

           console.log($scope.roomNameModel)
    var redirectPage = generateRandomStringToken(10)
     console.log("User gets redirected to : " + redirectPage + " ...")
     roomService.setRoomUID(redirectPage);
     console.log(roomService.room.roomUID);
     Hash.setHash(redirectPage);
     console.log("From Provider : " + Hash.getHash())
     $routeParams.hash = Hash.getHash()

        });




    }
])

和 script.js(请注意，这不是我唯一拥有的。您可以在 Cloud9 上的上述链接中看到所有其他内容(Plunk 未更新)):

var app = angular.module('LoginApp', ["firebase", "ngRoute", "ngCookies", 'ngMessages'])


app.provider("Hash", function ()
{
    var UID = 0;
    var _getHash = function()
    {
        return UID;
    };
    return {
        getHash: _getHash,
        $get: function ()
        {
            return {
                setHash: function (value)
                {
                    UID = value;
                },
                getHash: _getHash
            }
        }
    }
})

app.config(function ($routeProvider, $cookiesProvider, HashProvider){
    $routeProvider
      .when('/', {
        templateUrl: 'HtmlFiles/registration.html',
        controller: 'regController'
      })
     .when('/logIn', {
        templateUrl: 'HtmlFiles/login.html',
        controller: 'loginController'
      })

      .when('/Chat', {
        templateUrl: 'HtmlFiles/Chat.html',
        controller: 'chatController'

      })
    .when('/:Hash', {
            template: '<h1>TEST TEST</h1>',
            controller: 'any controller'
        })
      .when('/userSettings', {
        templateUrl: 'HtmlFiles/userSettings.html',
        controller: 'userSettingsController'
      })
      .when('/room', {
        templateUrl: 'HtmlFiles/room.html',
        controller: 'roomController'
      })

      .otherwise({
        redirectTo: '/'
      }); 
});

app.controller('Testing', ["$scope","roomService","Hash",function($scope, roomService, Hash){
  console.log("This is from the Controller Service: " + roomService.room.roomUID)
  console.log(Hash.getHash())
  }
])
app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    var ref = new Firebase("https://chattappp.firebaseio.com/");
    return $firebaseAuth(ref);
  }
]);

app.factory("Ref", function(){
   var ref = new Firebase("https://chattappp.firebaseio.com/")
   return ref;
})

app.factory("UniPosts" , function(){
  var ref = new Firebase("https://postss.firebaseio.com/")
   return ref;
});

app.service('getCookieService', ["$cookieStore", "$scope", 
          function($cookieStore, $scope){
            this.getCookie = function(name){
              $cookieStore.get(name)
            }
          }
    ])




  [1]: https://ide.c9.io/amanuel2/chattapp
  [2]: https://plnkr.co/edit/ToWpQCw6GaKYkUegFjMi?p=preview

最佳答案

你的代码有两个问题:

“roomController”的定义

app.controller('roomController', ["$scope", "Auth", "Ref", 
               "AuthService", "roomService","$http", 
               function($scope, Auth, Ref, AuthService, roomService, 
               $http,box) {})

只需匹配参数及其声明，您就会发现您错过了“box”参数的声明。正确的“roomController”定义应该是这样的:

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)

“盒子”提供者。您将“setColor”方法定义为提供者的配置方法，但您正试图将其用作提供者结果方法。更正后的版本应该是这样的:

app.provider("box", function ()
{
    var hex = "SomeColor";
    var UID = 3;
    return {
        $get: function ()
        {
            return {
                color: hex,
                setColor: function (value)
                {
                    UID = value
                }
            }
        }
    }
})

Angular Providers

对 EDIT2 的回答:

您定义了 HashProvider。要在 app.config 中配置它，您应该将参数作为 HashProvider 传递(不仅仅是哈希，但是当您尝试在除 app.config 之外的任何地方使用它时，您应该将其注入(inject)为哈希)。所以你的 app.config 声明应该是这样的:

app.config(function ($routeProvider, $cookiesProvider, HashProvider)

...为了让您访问 getHash 方法，有必要将其移动到提供者配置中，例如:

app.provider("Hash", function ()
{
    var UID = 0;
    var _getHash = function()
    {
        return UID;
    };
    return {
        getHash: _getHash,
        $get: function ()
        {
            return {
                setHash: function (value)
                {
                    UID = value;
                },
                getHash: _getHash
            }
        }
    }
})

对 EDIT3 的回答:

现在我知道你想要做什么了。问题是您正在尝试做错 :)。正确的方法更简单。你必须 configure route带有参数，例如像这样:

.when('/:hash', {
    template: '<h1>TEST TEST</h1>',
    controller: 'any controller'
})

并将它放在最后一条路线之后。之后，在 Controller 中，您可以使用 $routeParams 对象访问哈希。例如像这样:

$routeParams.hash

然后在 Controller 中你可以分析它是否是正确的哈希并做必要的事情，或者如果哈希无效则将用户重定向到某个地方。

关于javascript - AngularJS 路由参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34971584/

文章推荐： ios - 无法从服务器下载附件作为响应

文章推荐： ios - 当 SCNScene overlaySKScene 的 child 时查找触摸的 SKNode

文章推荐： ios - 选择快速加载 View 的正确方法或事件

c++ - 按位置查找未标记的模板选项/参数/参数
简而言之:我想从可变参数模板参数中提取各种选项，但不仅通过标签而且通过那些参数的索引，这些参数是未知的标签。我喜欢 boost 中的方法(例如 heap 或 lockfree 策略)，但想让它与 S
Excel IF 语句 3 参数参数
我可以对单元格中的 excel IF 语句提供一些帮助吗？它在做什么？对“BaselineAmount”进行了哪些评估？ =IF(BaselineAmount, (Variance/Baselin
c# - 有没有办法在异步方法中使用 out 参数？如果没有，谁能建议我如何从异步方法返回 OUT 参数？
我正在使用以下方法: public async Task Save(Foo foo,out int param) { ....... MySqlParameter prmparamID
delphi - 如何清除“运行”->“参数”菜单中的“参数”字段？
我正在使用 CodeGear RAD Studio IDE。为了使用命令行参数测试我的应用程序，我多次使用了“运行 -> 参数”菜单中的“参数”字段。但是每次我给它提供一个新值时，它都无法从“下拉
java - Integer.toString(参数) 或 toString(参数)
我已经为信用卡类编写了一些代码，粘贴在下面。我有一个接受上述变量的构造函数，并且正在研究一些方法将这些变量格式化为字符串，以便最终输出将类似于号码:1234 5678 9012 3456 截止日期:
MySql IN 参数 - 在存储过程中使用时，VarChar IN 参数 val 是否需要单引号？
MySql IN 参数 - 在存储过程中使用时，VarChar IN 参数 val 是否需要单引号？我已经像平常一样创建了经典 ASP 代码，但我没有更新该列。我需要引用 VarChar 参数吗？
javascript - 创建一个有两个参数的函数，参数 a 将是一个数组，参数 b 将在数组中查找一个元素
给出了下面的开始，但似乎不知道如何完成它。本质上，如果我调用 myTest([one, Two, Three], 2); 它应该返回元素 third。必须使用for循环来找到我的解决方案。 funct
c - long int 参数 != long int 参数
将 1113355579999 作为参数传递时，该值在函数内部变为 959050335。调用(main.c): printf("%d\n", FindCommonDigit(111335557999
java - 为什么修改了 ArrayList 参数，但没有修改 String 参数？
这个问题在这里已经有了答案: Is Java "pass-by-reference" or "pass-by-value"? (92 个回答) 关闭9年前。 public class StackOve
c - scanf(参数) == 1 vs 1 == scanf(参数) 没有区别吗？
我真的很困惑，当像 1 == scanf("%lg", &entry) 交换为 scanf("%lg", &entry) == 1 没有区别。我的实验书上说的是前者，而我觉得后者是可以理解的。 1 =
Delphi 中的 Windows API 参数 - 使用或不使用 @ 运算符传递 var 参数？
我正在尝试使用调用 SetupDiGetDeviceRegistryProperty 的函数使用德尔福 7。该调用来自示例函数 SetupEnumAvailableComPorts .它看起来像这样:
php - MySQL如何从年份(参数)、weekOfYear(参数)、时间(数据库)和dayofweek(数据库)创建时间戳？
我需要在现有项目上实现一些事件的显示。我无法更改数据库结构。在我的 Controller 中，我(从 ajax 请求)传递了一个时间戳，并且我需要显示之前的 8 个事件。因此，如果时间戳是(转换后)
ruby-on-rails - ||如何工作？ : @client = client. 查找(参数[:client_id] || 参数[:id])
rails 新手。按照多态关联的教程，我遇到了这个以在create 和destroy 中设置@client。 @client = Client.find(params[:client_id] || p
java - 无法通过 .bat 文件设置 JVM 参数/参数(Xmx 和 Xms)
通过将 VM 参数设置为 -Xmx1024m，我能够通过 Eclipse 运行 Java 程序-Xms256M。现在我想通过 Windows 中的 .bat 文件运行相同的 Java 程序 (jar)
c++ - 如何从 C++ 调用 Delphi DLL WideString 参数(包括 var 参数)
我有一个 Delphi DLL，它在被 Delphi 应用程序调用时工作并导出声明为的方法: Procedure ProduceOutput(request,inputs:widestring; va
amazon-web-services - AWS Proton 参数 - 阐明如何在 CF 模板中使用 schema.yaml 参数
浏览完文档和示例后，我还没有弄清楚 schema.yaml 文件中的参数到底用在哪里。在此处使用 AWS 代码示例:https://github.com/aws-samples/aws-proton
java - 错误代码[17041]；索引::1 处缺少 IN 或 OUT 参数；嵌套异常是 java.sql.SQLException: 在索引::1 处缺少 IN 或 OUT 参数
程序参数: procedure get_user_profile ( i_attuid in ras_user.attuid%type, i_data_group in data_g
SQL + IN + 参数
我有一个字符串作为参数传递给我的存储过程。 dim AgentString as String = " 'test1', 'test2', 'test3' " 我想在 IN 中使用该参数声明。 AND
java方法内部变量上没有 "this"参数
这个问题已经有答案了: When should I use "this" in a class? (17 个回答) 已关闭 6 年前。我运行了一些java代码，我看到了一些我不太明白的东西。为什么下
Javascript 参数
我输入 scroll(0,10,200,10);但是当它运行时，它会传递字符串“xxpos”或“yypos”，我确实在没有撇号的情况下尝试过，但它就是行不通。 scroll = function(xp

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - AngularJS 路由参数

编辑 2

编辑 3

编辑 4