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 的正确方法或事件

angularjs - 从非 AngularJS 页面将参数传递到 AngularJS 应用程序
是否有在非 AngularJS 页面内初始化 AngularJS 应用程序的最佳实践方法？我正在向现有网页添加新功能，需要传入一个参数。具体来说，有一组选项卡，一个新选项卡将启动一个 Angular
angularjs - angularJs 中的这些引导方法有什么区别？
找不到这两者之间的区别。保留其中任何一个来引导我的 Angular 应用程序是否有意义？ angular.bootstrap(document,['myApp']); 或者 angularAMD.b
angularjs - AngularJS 如何查找和加载模块
我试图理解 Packpub 的书附带的示例 AngularJS 应用程序。 app.js文件在 client/src/app 下定义文件夹，它的模块定义看起来像 angular.module('app
angularjs - AngularJs 中的警告
Angularjs 具有用于表单验证和显示错误消息的强大基础设施。但是，我处于必须在特定场景中向用户显示警告消息的情况。这是我的简单表格的图表该表单在两个字段上都应用了必需和模式验证。除了此验证之外
angularjs - AngularJS Promise重试
我在重试功能正常工作时遇到了一些麻烦，希望能获得一些帮助。我有一个要调用的$ resource，直到出现成功情况或超过最大重试次数为止。我似乎遇到的问题是，在我的重试函数中，我正在调用另一个prom
angularjs - 根据用户是否经过身份验证隐藏或显示链接 - AngularJs
我目前正在开发一个 AngularJS 应用程序，我遇到了以下障碍。当用户提交时，我们有一个 login 页面，我们调用一个 web api 并对用户进行身份验证，我们目前正在使用 claims 身
angularjs - angularjs 中的动态指令
当范围更新时，指令的属性不会改变，它们仍然保持初始值。我在这里缺少什么？ HTML works great works: {{foo}} Javascript (基于首页上的 A
angularjs - 基础和 AngularJS
我正在使用 Zurb 的 Foundation 框架修改应用程序以实现响应性和 AngularJS。存在数据显示在带有 ... 的表中的错误有是根据 Foundation 的响应规则隐藏/显示的。不
angularjs - AngularJS $ watch改变元素的宽度
在过去的三天里，我一直在搜寻互联网，试图弄清楚当angular注意到div的宽度发生变化时如何使指令运行。我不断看到相同的示例，说明如何实现此目标，但是它们对我不起作用，我也不知道为什么。我回到一
angularjs - 综述 - AngularJS
我正在使用以下代码尝试汇总在 Angular ，这在整个作品中，但是小于 0.5 的数字四舍五入为 0。我想向上取整每个数字到下一个整数。例如 0.02 应四舍五入为 1 {{((data.Vi
angularjs - AngularJS 定义中的命名冲突
我目前正在尝试以一种能够适当扩展到企业级别的方式来组织我的 Angular 应用程序。但是我发现似乎过度依赖框架内的命名约定，并且试图避免命名冲突是一个真正的问题。例如，当定义任何 constant
angularjs - AngularJS 对多页面应用程序有用吗
我正在阅读 AngularJS 基础知识，并且喜欢在我的页面中使用它的绑定(bind)功能。所以我可以定义可以在 View 中显示的数据，可以对数据进行更改，以便在 View 中更改它而无需担心。在
angularjs - AngularJS 中作用域的继承
在父 Controller 范围内，我定义了 selectedItem设置为“x”。然后在子范围内，我定义了selectedItem使用 ngModel:
angularjs - AngularJS 的数字签名
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 5年前关闭。 Improve this questi
angularjs - AngularJS ng类的多个条件
如果2个条件为真，我试图将一个特定的类应用于li元素，因此我编写了以下代码，但似乎无法正常工作 ng-class="{current:isActive('/'), loginStatus: false
angularjs - angularJS ng模式不起作用
请看看朋克。 http://plnkr.co/edit/DuTFYbLVbPkCIvRznYjG?p=preview ng-pattern regEx不适用于输入文本字段。仅在需要验证的情况下才能正
angularjs - AngularJS/Ionic中的深层链接示例
我正在为iOS + Android构建AngularJS(1.x)和Ionic/Cordova移动应用程序。我想在登录页面上添加/创建“深层链接”，以便在我向新用户发送“确认您的电子邮件”电子邮件时，
angularjs - AngularJS 服务何时重新初始化？
angularjs 中服务(或工厂)的生命周期是什么，何时重新初始化？最佳答案当 Angular 启动时，它会将服务的构造函数附加到关联的模块上。这种情况发生一次。 angular .modu
angularjs - Angularjs 的事件记录或数据映射器模式？
我对 Angular 很陌生，所以希望我知道的足够多，可以问什么似乎是合理的设计问题。我正在通过 Angular 绘制一些数据，并且正在使用 $resource。在将 Angular 引入项目之前，
angularjs - angularJs 的国家选择控件
我需要在我的 angular-breeze 应用程序中使用国家/地区下拉菜单，我尝试了以下操作: https://github.com/banafederico/angularjs-country-s

可可西里

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - AngularJS 路由参数

编辑 2

编辑 3

编辑 4