AngularJs:只有单击两次后才会登录

2024-04-23

我是 AngularJs 的新手。

我正在开发一个小型的角度应用程序。

我的方法: 我的 index.html 页面有 2 部分,一个ng-view and a 带有 4 个导航按钮的 div.div 最初使用 ng-show.ng-show="variable" 隐藏(在主控制器中创建一个值为 null 的变量。登录成功后,该变量将从 Null 变为 true。)。登录成功,导航 div 将可见,其余部分看起来不错,至少目前是这样。

问题: 登录按钮启动登录功能,只需单击按钮两次即可登录。在控制台中,我可以看到,创建了两个连续的 SessionID。第一次单击时,变量从 null 变为 True。仍然对整个页面有影响。

任何人都可以帮忙吗?


我还没有看到你的代码,但认为你的问题是你正在尝试更改视图范围,并且它与你的导航范围不同div有。在这种情况下,您可以修改导航 div 使其具有与视图相同的范围或使用$rootScope.

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.10/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Log-on App</h1>
    <div>
      <ul ng-show="variable">
        <li><a href="#/one">One</a></li>
        <li><a href="#/two">Two</a></li>
        <li><a href="#/three">Tree</a></li>
        <li><a href="#/fore">Fore</a></li>
      </ul>
    </div>
    <div ng-view></div>
  </body>

</html>

JavaScript

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/', {
        controller: 'appController',
        template: '<div ng-show="!variable"><input type="text" /><input type="button" value="Log On" ng-click="login()" /></div>'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]).
  controller('appController', ['$rootScope', '$scope', function($rootScope, $scope) {
    $rootScope.variable = null;
    $scope.login = function() {
      $rootScope.variable = true;
    }
  }]);

笨蛋:http://plnkr.co/edit/Cjn2K8IEg0WQZDGVwPIw?p=preview http://plnkr.co/edit/Cjn2K8IEg0WQZDGVwPIw?p=preview

我能想到的另一个原因是你正在尝试修改$scope控制器外部。在这种情况下你应该打电话$scope.$digest() or $scope.$apply()修改范围变量后。

JavaScript

function logOnClick() {
  var $scope,
      div;
  div = document.getElementById('navigationDivId');
  $scope = angular.element(div).scope();
  $scope.variable = true;
  $scope.$digest();
}

编辑:使用远程服务登录

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

AngularJs:只有单击两次后才会登录 的相关文章

  • 为什么我无法将 $location 注入到我的 config() 中?

    为什么这会给我一个错误 angular module app config function routeProvider locationProvider httpProvider location 未捕获的错误 未知的提供商 来自应用程序
  • ng-include 和 ng-view 不同时加载

    下面是我的应用程序的结构 很简单 页眉和页脚是非常小的文件 而主页上的 ng view 要大得多 当我进入该页面时 我注意到了这一点 首先加载两个 ng include 然后 ng view 出现 页脚被推到底部 页脚闪烁大约 0 1 秒
  • 嵌套指令 - 无法将参数从 Angularjs 中的子指令传递到控制器方法

    我在 angularjs 中的嵌套指令方面遇到了一些问题 我想从另一个指令中的指令调用控制器方法 并尝试将参数传递给它 但是它们是未定义的 我尝试使用下面的 selected html 中的三个参数来调用remove 在我引入父指令 tel
  • 如何从 jQuery 对话框按钮访问我的角度范围?

    http plnkr co edit Rf0VItthVBg6j0z7KudO http plnkr co edit Rf0VItthVBg6j0z7KudO 我正在使用 jQuery 对话框 并且想要使用对话框按钮 但我不知道如何获取范围
  • 如何像在 jQuery 中一样在 AngularJS 中触发事件?

    是否可以做类似的事情 container trigger click 仅使用 AngularJS 如果不可能trigger 还有其他方法来管理这种行为吗 我有一个基本示例 可以在单击按钮时创建一个框 创建的框是可拖动的 现在 用户必须单击按
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • AngularJS 数据绑定在 ng-bind-html 中?

    是否可以将作用域变量的数据绑定到即将绑定为 ng bind html 的 html 即 我有一个 html div caption div 我的角度模板看起来像 div div 范围变量的值caption在角度控制器中设置 所以 我想绑定数
  • 在 Braintree 中使用 AngularJS 加密信用卡详细信息

    我正在使用 Braintree 作为支付网关 但遇到了一个问题 我正在发送信用卡信息和其他用户详细信息 出于安全目的 信用卡信息必须进行加密 Braintree 对此进行了加密 包括以下内容 braintree onSubmitEncryp
  • 当您只能访问模块变量时注入模块

    假设你有一个 var app angular module Mod1 现在您需要向该模块注入其他内容 但您无法更改该行 您只能访问app多变的 所以这行不通 对吧 var mod2 angular module mod2 factory m
  • 使用 Angular 将焦点捕获在 html 容器中

    我正在构建一个可访问的网站并尝试管理焦点 我需要打开一个模式 然后将焦点放在模式中的第一个元素上 然后捕获焦点 直到模式关闭 取消 或 接受 HTML a href Open Modal a div h3 Terms of Service
  • Protractor:是否可以测试我的应用程序中没有404?

    我是量角器的新手 我想编写一个测试来查看是否存在带有 url 的锚点给出 404 错误 我见过这个如何用量角器测试html链接 https stackoverflow com questions 29212375 how to test h
  • 将表单传递给 AngularJS 组件进行验证

    我正在将旧代码库迁移到 AngularJS 1 5 所推广的新组件架构 我在对较大的表单执行此操作时遇到了问题 传统上 我会附加表单验证 如下所示
  • 在多个 angular.js 应用程序之间共享单个服务

    我正在构建一个电子商务网站 基于 shopify 并且使用多个小型 angularjs 应用程序来处理诸如快速购物车 愿望清单 过滤产品和其他一些较小项目之类的事情 我最初使用了一个大型应用程序 具有路由和所有内容 但当我没有完整的 RES
  • 在 angularJS 中覆盖模块值/常量的最佳方法

    我用 angularJS 编写了一个模块 封装了所有后端通信 为了获得更大的灵活性 我将 api 前缀作为模块上的常量值 可能是值 因为我没有在配置阶段使用它 所以像 angular module myapp data constant a
  • angularjs - 将对象数组(JSON 数据)发布到 PHP 页面

    我的 JSON 数据的示例如下 scope a email keval gmail permissions upload 1 edit 1 email new aa permissions upload 1 edit 1 我想发布同样的内容
  • 为什么 AngularJS 指令(属性等)在 WebStorm 8 中显示为“无效”?

    我几个小时前刚刚安装了 WebStorm 8 我一直在写一些 AngularJS 的东西 但我有一个相当烦人的小问题 AngularJS 插件似乎只能部分工作 每当我输入 ng 时 我都会收到一个智能感知弹出窗口 其中显示所有各种 ng 属
  • 401 未经授权的帖子回复

    我一直在使用 Angular 模板制作 Node js 网站 但我无法在 DB Mongo 上创建数据 这是代码 节点路由 var Property mongoose model Property var jwt require expre
  • 使用 angularjs 在 Internet Explorer 中获取 Blob url

    鉴于此代码 来自其他人 var module angular module myApp module controller MyCtrl function scope scope json JSON stringify a 1 b 2 mo
  • 如何从 Angular 计时器获取当前时间

    我正在测试角度计时器 http siddii github io angular timer 并且发现自己想知道如何在控制器中获取当前时间 以便将其用于我可能有的任何目的 例如 我想当达到特定的分钟数时 将计时器的字体颜色设置为红色 但我完
  • 在 Angular JS 中撤消重做

    我有一个大对象排列在 rootScope 中 比如说 gt 100 个对象 每个对象又具有对象 数组的层次结构 我想使用 deepWatching watch 整个 rootScope 即将 watch 的第三个参数设置为 TRUE 但这里

随机推荐

  • 从 Java / C# 角度理解 C++ 编译器

    我是一名经验丰富的 Java C 程序员 最近开始学习 C 问题是 我无法理解如何构建各种头文件和代码文件 这似乎主要是由于我对编译器如何将所有内容链接在一起缺乏了解 我尝试阅读一些教科书 但我的先入之见受到我的 Java 和 C 知识的影
  • 使用 AVPlayer 播放流媒体视频

    如何播放流媒体视频AVPlayer import Cocoa import AVKit class StreamViewController NSViewController var videoPlayer AVPlayer IBOutle
  • maven中这两个设置一样吗?

    我想限制maven仅使用私有 非公共maven存储库 这两个设置具有相同的效果吗 1 settings xml中设置镜像
  • 使用jquery mobile在页面之间传递参数

    jquery mobile 中页面之间传递参数的正确方法是什么 在jquery mobile的Q A中 有一些插件的建议 是强制性的吗 请告诉我正确的方法 没有一个具体的答案 我必须为页面中的所有链接传递参数 http view jquer
  • Mercurial .hgrc 文件

    默认情况下 在 Windows XP 上 Mercurial 将 hgrc 文件存储在 好吧 就我而言 c Documents and Settings srooks 我如何更改该位置 并让它在其中查找 hgrc 文件 例如 c Confi
  • 在哪里可以找到 Hyperledger Fabric peer 命令可能的环境变量?

    配置对等节点运行时 示例 docker compose 文件中包含许多环境变量 有什么地方可以找到它们的全部记录吗 e g environment CORE VM ENDPOINT unix host var run docker sock
  • 如何在 Dockerfile 中添加大型 HTTP 文件并将其从镜像层中排除?

    Our Nexus服务器 http www sonatype com nexus product overview为我们的 Java 项目提供构建工件 包括其安装程序 那个安装程序是真的很大 gt 1GB 我想检索并使用它Dockerfil
  • Matplotlib scatter():大小、标记形状的默认值

    有没有办法设置default标记尺寸 s matplotlib 的参数plt scatter 或者同样设置标记的形状 mpl rcParams keys 有线图的设置 例如 import matplotlib as mpl mpl rcPa
  • 如何在 H2 中创建过程

    这似乎与具有相同标题的其他问题重复 但实际上并非如此 我们的业务逻辑主要作为 DB2 存储过程来实现 我看到 H2 有一个 DB2 兼容模式 很好 我们如何使用 H2 通过这些程序进行内存单元测试 不幸的是 H2 似乎缺少 CREATE P
  • Android中的适配器应该是静态内部类还是非静态内部类

    我在 Activity 中有一个 ListView 并且正在为 ListView 设置自定义适配器 我的适配器类应该是 private static class MyAdapter extends ArrayAdapter or priva
  • golang:无法从内存不足崩溃中恢复

    在某些情况下 调用append 会触发内存不足恐慌 并且append 本身似乎不会返回nil 我怎样才能避免这种恐慌情况并向我的用户显示 资源暂时不可用 此致 你不能 如果运行时无法为追加分配内存 则可能无法恢复或向用户传达 资源暂时不可用
  • Lua 中的内联条件(a == b ? "yes" : "no")?

    无论如何 Lua 中可以使用内联条件吗 Such as print blah a true blah nahblah Sure print blah a and blah or nahblah
  • 如何在 Mapbox 4.1 中添加自己的图块

    我有一个图块来源作为网址 并希望将它们添加到我的地图中 我能够做到这一点谷歌地图 and OSMDroid 但我不知道如何使用Mapbox 我的网址格式如下 http mysource x y z 我已经看到了针对网络的解决方案 但我没有找
  • 所有 iPad 和 iPad Pro 的视图之间的间距是否规则/规则?

    我最近遇到了不同 iPad 之间常规 常规尺寸类别的差异 这是我的相关问题所有 iPad 包括 iPad pro 的常规 常规头寸大小限制 https stackoverflow com questions 33958858 regular
  • 从 Angular2 服务返回一个空的 Observable

    我正在构建一个 Angular 2 应用程序 它使用服务来收集数据 该服务确实包含以下逻辑 CORE COMPONENTS import Injectable from angular core import Http Response f
  • 如何使用变量名称通过 ddply 引用数据框列?

    我正在尝试编写一个函数 该函数将保存时间序列数据的数据框的名称和该数据框中的列的名称作为参数 该函数对该数据执行各种操作 其中之一是在列中添加每年的运行总计 我正在使用plyr 当我直接将列名与 ddply 和 cumsum 一起使用时 没
  • 如何在 MySQL 中将 SELECT ON 表名授予 PUBLIC

    我是 MySQL 新手 我试图弄清楚如何使所有经过身份验证的用户都可以公开读取表格 在甲骨文中我会说grant select on tablename to public 该语法不适用于 MySQL 我无法找出等效的语法 Per MySQL
  • 查找向量中最近的点

    给定一个具有多个值的排序向量 如下例所示 std vector
  • nginx 缓存 HTML 文件该怎么办?

    我一直遇到缓存问题HTML我的项目中的文件 我有一个针对静态资源 图像 脚本 CSS 等 的缓存清除机制 但所有这些解决方案似乎都无法处理HTML缓存问题 I added expires 0 to Nginx on all HTML文件 但
  • AngularJs:只有单击两次后才会登录

    我是 AngularJs 的新手 我正在开发一个小型的角度应用程序 我的方法 我的 index html 页面有 2 部分 一个ng view and a 带有 4 个导航按钮的 div div 最初使用 ng show ng show v