如何在AngularJS中创建全局变量

2024-03-19

我遇到这个问题,当您注册时,您会进入“用户”页面。它应该说“欢迎”用户名没有出现在网页上,原因我不确定......请帮助这里是plunkr:

http://plnkr.co/edit/qB3Gkeq5ji1YQyy0kpGH?p=preview http://plnkr.co/edit/qB3Gkeq5ji1YQyy0kpGH?p=preview

请我需要帮助..

我需要获取一些 plunker 的代码,所以: 脚本.js:

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

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

      .when('/User', {
        templateUrl: "User.html",
        controller: 'AuthCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });


  });


app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    var ref = new Firebase("https://uniquecoders.firebaseio.com/");
    return $firebaseAuth(ref);
  }
]);


app.controller("AuthCtrl", ["$scope", "Auth",
  function($scope, Auth) {


      $scope.createUser = function() {

        $scope.message = null;
        $scope.error = null;
    var ref2 = new Firebase("https://uniquecoders.firebaseio.com/");
  ref2.createUser({
    email: $scope.email,
    password: $scope.password
  }, function(error, userData) {
    if (error) {
      switch (error.code) {
        case "EMAIL_TAKEN":
          alert("The new user account cannot be created because the email is already in use. Try to login");
          break;
        case "INVALID_EMAIL":
          alert("The specified email is not a valid email.");
          break;
        case "INVALID_PASSWORD":
          alert("The Specified Passowrd Is not valid.")
          break;
        default:
          alert("Error creating user:", error);
      }
    } else {
      alert("Successfully created user account with uid:", userData.uid);
      alert($scope.UserName)

      window.location.hash = "/User"
       $scope.usernames = "HEY"
    }
  });


      };

       $scope.logIn = function(){
        $scope.message = null;
        $scope.error = null;

        ref2.authWithPassword({
          "email" : $scope.logInemail,
          "password" : $scope.logInemailpassword

        }, function(error, userData){

          if(error){
            alert("Login Failed.")
            console.log(error)
          }
          else{
            alert("Logged In!")
          }

        })

      }

  /*  $scope.removeUser = function() {
      $scope.message = null;
      $scope.error = null;

      Auth.$removeUser({
        email: $scope.email,
        password: $scope.password
      }).then(function() {
        $scope.message = "User removed";
      }).catch(function(error) {
        $scope.error = error;
      });
    };*/
  }
]);

当您的应用程序更改路由时,它会破坏旧控制器的作用域并创建新的作用域。即使您对旧路线和新路线使用相同的控制器,也会发生这种情况。

将持久数据存储在您的Auth工厂以及创建该数据的函数。

app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    var AuthObj = {};
    //Store persistent data on AuthObj
    AuthObj.ref = new Firebase("https://uniquecoders.firebaseio.com/");
    AuthObj.createUser = function(email,password) {
        AuthObj.ref.createUser(
            {email: email, password: password },
            function(error, userData) {
                if (error) {
                    //process error
                } else {
                    //store data on AuthObj
                    AuthObj.userData = userData;
                }
             }
        );
        return AuthObj.userData;
    };
    //return AuthObj which holds functions and data
    return AuthObj;
  }
]);

使用您的控制器invoke这些功能和retrieve持久数据。

app.controller("AuthCtrl", ["$scope", "Auth",
  function($scope, Auth) {
     //retrieve userData
     $scope.userData = Auth.userData;
     $scope.createUser = function() {
          if ($scope.userData) {
              return;
          } else {
              $scope.userData =
                   //invoke function in factory
                   Auth.createUser($scope.email,$scope.password);
          };
     };
   }
]);

这样,当您更改路线时,数据就会保留下来。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在AngularJS中创建全局变量 的相关文章

  • 从 HTML 文件输入中删除“所有文件”选项

    我在用
  • 带有量角器端到端测试的 Electron 应用程序

    我目前正在研究一个Electron http electron atom io 应用程序 我现在想将端到端测试与量角器 https angular github io protractor 我已经查看了 Protractor 的教程 现在正
  • Angular 链接函数:$Scope 与 Scope

    在我在教程中看到的角度指令中 link function scope element attrs or link function scope element attrs 现在我知道 意味着角度服务 这在这里成立吗 scope 和scope
  • 将复杂对象传递给 ui-sref 参数

    我需要这样的构建网址 列表 过滤器 状态 1 过滤器 类型 2 I do link a List a 在参数中传递复杂对象 如果传递简单对象 filter 1 可以 但我需要这个 state state list url list filt
  • AngularJS 1.X 中的异步调用是如何工作的? $Http 调用没有返回值

    我有以下名为的函数getvalue 它与控制器一起位于 AngularJS 模块内 我试图在单击事件上调用此函数 调用控制器中的另一个函数 我希望我很清楚 功能 function getvalue Data http var value u
  • WebAPI 和 Angular JS Excel 文件下载 - 文件损坏

    我正在 WebAPI 中生成 Excel 文件 我将其 存储 在内存流中 然后放入响应 如下所示 var result new HttpResponseMessage HttpStatusCode OK Content new Stream
  • 使用 ng-if 内容短暂呈现然后消失

    我的页面上有一些内容包含在 ng if 中 如下所示 div class text danger p strong Message displayed to User strong p div 然后在我的 Angular js 控制器中我有
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 使用 ui-router 的 angular.js,如何仅重新加载一个视图?

    我有一个相当简单的待办事项应用程序 使用 angular js 我正在使用 ui router 库 我查看了 github 上的 ui router 示例 https github com angular ui ui router tree
  • Protractor addMockModule 附加参数不起作用?

    这看起来非常非常简单 但我不明白为什么这个简单的代码不起作用 我正在添加一个模拟模块来在 Angular E2E 测试中模拟我的 API 后端 我正在使用量角器 1 6 0 我需要将附加参数传递给模拟模块 根据 Protractor 文档
  • Angular UI 路由器嵌套视图问题

    我在理解 Angular UI Router 嵌套视图的工作原理时遇到了一些问题 我的 stateProvider 看起来像这样 stateProvider state login url login views main template
  • AngularJS templateUrl 与 template - 隔离范围

    我有以下指令 offerListSorters directive offersSorter myState templateCache function myState templateCache return scope control
  • 如何在 AngularJS 中滚动到页面顶部?

    我想在使用 angularjs 获得 ajax 调用响应后滚动到页面顶部 基本上 我在页面顶部显示警报消息 并且希望在收到 ajax 响应时将警报消息集中显示 Thanks 您可以使用 window scrollTo x y where x
  • 动态分配 ng-model

    我正在尝试从对象数组生成一组复选框 我的目标是让复选框动态地将其 ng model 映射到将提交到数组中的新对象的属性 我的想法是这样的 li li
  • Angular 指令,属性更新时不调用链接

    在以下示例中 http plnkr co edit OZjg6sUgl35GIriaabQg p preview http plnkr co edit OZjg6sUgl35GIriaabQg p preview 我有 2 个指令 show
  • 为什么还是filter和orderBy的优点呢?

    看来 AngularJS 确实非常重视在视图中使用过滤器和其他 ng 指令来过滤和排序数据 而不是在模型中手动执行 这有什么原因吗 比如速度更快 有缓存还是其他原因 例如 我想显示一个已排序的列表 但我也想访问已排序的列表以用于与视图无关的
  • 如何将一个“模型”映射到两个字段?

    我有一个具有 高度 属性的模型 我希望允许用户将其编辑为两个单独的字段 英尺 和 英寸 但让它们映射到以英寸为单位测量的单个属性 高度 表格看起来像这样 在这些字段和单个 高度 属性之间创建双向绑定的最佳方法是什么 HTML
  • AngularJS工厂如何返回一个对象

    我有一个要求 我应该在其中编写工厂 这个工厂应该包含3个函数init save和delete 我应该从控制器调用 init 函数 该函数返回一个对象 该对象具有执行添加和删除功能的功能 我怎样才能做到这一点 以下是我的代码 它成功执行了 i
  • 在 AngularJS 中动态显示图像

    我正在使用http请求从数据库获取图像的路径 并且图像位于服务器中 我想在 img src 中显示该图像 这是代码 http url user profile exec php method GET params uid user id s
  • 根据用户是否经过身份验证隐藏或显示链接 - AngularJs

    我目前正在研究一个AngularJS应用程序中 我遇到了以下障碍 我们有一个login当用户提交页面时 我们调用 Web api 并对用户进行身份验证 我们目前正在使用声明身份验证来设置 cookie 等 这些内容按预期工作 但是我遇到的问

随机推荐

  • Elasticsearch 一个月内特定小时的总价值

    我有一个带有字段的elasticsearch服务器 timestamp user and bytes down 除其他外 我想计算用户一个月内的 bytes down 值总计 但仅限于上午 8 点到晚上 8 点之间的时间 我可以通过以下查询
  • 如何自动加载键盘(iOS SDK)?

    非常简单的问题 我得到一个由两个文本字段组成的视图 当视图加载时 我希望键盘自动弹出并聚焦第一个字段 我怎么做 在代码中 在 IB 中 多谢 芥末 In your viewDidAppear 方法调用 yourTextField becom
  • 使用相同表单名称进行 Jquery 验证[重复]

    这个问题在这里已经有答案了 我有一个表格可以做两件事 将名字和电子邮件地址传递给 PHP 如果用户想要提交多于一组或两组数据 则单击即可动态添加一组新的姓名 电子邮件字段 由于我不确切知道每个用户可能选择提交多少组 因此我将数据以数组形式传
  • 给出分割错误的 2D 矢量

    我正在尝试使用向量创建一个二维数组 我编写了以下代码 int main vector lt vector
  • 无法在 Sitecore 项目上设置工作流程和工作流程状态属性

    我目前正在开发一个项目 需要我设置一个非常简单的 Sitecore 工作流程 在修改现有项目以使用新工作流程时 我遇到了一些困难 这就是我所做的 当内容管理员开始编辑项目时 工作流程会创建一个新版本 并在单击提交按钮时发布该项目 我将这些工
  • 如何(策略)以 BDD 风格对属性(获取/设置)进行单元测试?

    我有一个 很多 类具有属性 有些有逻辑 有些则没有 假设我想测试这些属性 我该怎么做呢 最近 我对用于创建单元测试的 BDD 风格很感兴趣 see here http iridescence no post Extending xUnit
  • ASP.NET 身份 cookie 和子域

    我正在尝试跨子域共享我的 ASP NET Identity cookie 目前只是本地 sub1 domain local 子2 域 本地 我有相同的机器密钥在两个站点上 但在 sub1 上创建的 cookie 不会在 sub2 上验证 反
  • 如何让StatusBar透明?

    有谁知道如何使用 React Native 使 Android 状态栏透明 不是半透明的 是透明的 我也在使用反应导航 就像这样使用它 测试使用 react native 0 60 4 和 0 61 5
  • ASP.NET MVC 列表框处理所选项目事件

    我在视图中使用 HTML ListBox 如下所示 这是用 IEnumerable 填充的
  • Objective-C - 测试对象实例被释放/释放

    有某种方法可以测试 Objective C 实例是否被释放 释放 保留计数 0 例如 对象 A 有一个指向对象 B 的引用 指针 但对象 B 可以在内存低级别中释放 我如何测试引用 B 以确保它已被释放 interface A NSObje
  • Base64 长度(以字节为单位)是多少?

    我有一个以 Base64 编码的文件 具有一定的文件长度 如何获取以字节为单位的大小 Example var size canvas toDataURL console log resizeCanvasURL length gt 13278
  • Android 6.0 原生 tgkill 崩溃

    从今天开始我就遇到了本地崩溃 据报道仅适用于Android 6 0 与堆栈跟踪 native pc 0000000000049c34 system lib libc so tgkill 12 native pc 00000000000474
  • 将 ODBC 应用程序与 JDBC 驱动程序结合使用

    我公司使用Vertica http www vertica com 我们有使用 pyodbc 连接到它的 Python 应用程序 我的大部分开发工作都是在 Mac Snow Leopard 上进行 不幸的是 Vertica 尚未发布适用于
  • 模拟 Retrofit 响应调用,但 Call 不起作用

    我正在嘲笑 APIService 的响应 不幸的是 它不起作用 我必须回电 但我不明白如何做 问题是如何发回 Call 对象 RunWith AndroidJUnit4 class class ApiServiceTest Test fun
  • 如何使用 API Gateway 上传 xls/xlsx 文件并将文件数据发送到 lambda 函数?

    我是 lambda 和 API 网关的新手 我使用此服务做了一些简单的事情 但现在我有一个要求 用户可以上传 Excel 文件 上传过程只是触发与 lambda 函数集成的 API 网关端点 我不想保存文件 我只想将文件数据以 CSV JS
  • 如何检查实体框架类型的属性是否可为 Null

    我有一个从数据库生成的 EntityDataModel 其中一个实体模型有两个属性 它们都是字符串类型 一个是 Nullable True 另一个是 Nullable False 如何在运行时检查 Nullable 属性的值 如果您的属性装
  • 如何从 Swagger API 声明生成 JSON-Schema

    我有 Swagger API 声明 用于使用招摇 v 1 2 https github com wordnik swagger spec blob master versions 1 2 md 我对 Swagger 的最初感觉是它非常接近
  • SQL Server - 同义词提示和技巧? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在xamarin表单中移动右侧搜索栏的搜索图标

    如何在 Xamarin 表单中移动右侧搜索栏的搜索图标 我正在寻找安卓和IOS 对于 Android 我使用了 SearchBarRenderer 下面的代码不起作用 有人知道该怎么做吗 请帮忙 protected override voi
  • 如何在AngularJS中创建全局变量

    我遇到这个问题 当您注册时 您会进入 用户 页面 它应该说 欢迎 用户名没有出现在网页上 原因我不确定 请帮助这里是plunkr http plnkr co edit qB3Gkeq5ji1YQyy0kpGH p preview http