问题标签 [angular-ui-router]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angularjs - AddThis 与 AngularJS URL 状态冲突
我目前正在使用 Addthis 的 api 来动态启动按钮。基本上addthis.init()
和addthis.button()
。
当我打开时说电子邮件选项或任何模式/弹出框选项。这会以某种方式自动将我的应用程序的 URL 更改回主页。
这当然是相当不和谐的。这意味着当我打开一个页面(不是主页)时,只需使用 add this,它就会将我重定向回主页。
我知道这是 AddThis 造成的,因为这是发生重定向时唯一发生的事情。注意我也在使用 ui-router,但如果这有任何相关性的话。
这是一个单页应用程序框架,因此重定向不是完整的重新加载,它是一个简单的状态更改,没有 URL 重新加载。
首先单击菜单上的“流行创意”。这会将 URL 更改为具有 ?popular=true 作为查询参数。将鼠标悬停在项目的图像上。你会看到一个分享按钮出现。点击“电子邮件”。当模态框出现时,查看 URL。URL 变回根 URL, ?popular=true 消失。
我目前正试图找出$locationChangeStart
事件是从哪里发出的,但我没有看到任何找到罪魁祸首的方法。
我将如何解决这个问题?
javascript - AngularJS UI-Router 具有相同 URL 的多个状态
我有一个使用 AngularJS 和 AngularUI 路由器 ui-router 制作的多页表单。每个步骤都有自己的 URL (/step1 -> /step2 -> /step3)。在第 2 步,表单为用户提供了 2 个选项之间的选择。根据选择的选项,我希望能够将用户发送到两种状态之一,但无论选择这两种状态中的哪一种,我都希望 URL 更改为 /step3。
我已经尝试了很多努力来让它工作,包括让两个替代状态一个作为另一个的孩子(如下所示)导致只显示父级(步骤 3-a),并有一个抽象的父级步骤(步骤-3) 使用 url,然后是两个子步骤(step-3-a 和 step-3-b),并使用 onEnter 事件和转换进行路由。这两个都未能正确显示内容(后者将用户踢出到 /user/userId)。
在这个庄园里一定可以走,但我似乎无法让它工作。任何帮助或建议将不胜感激。
谢谢
javascript - 使用身份验证时Angularjs路由不稳定
我正在寻找一种更好的方法来在 angularjs 中进行路由状态之间的转换。目前,我一直在关注几个不同的教程,以使用服务器端的身份验证来配置带有后端 api 服务器的 angular。
http://frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/ https://vickev.com/#!/article/authentication-in-single-page-applications-node-js -passportjs-angularjs
这两个都描述了在服务器端而不是在客户端进行身份验证的类似解决方案。我有一个角度的身份验证服务,它使用一种方法发布到 api 服务器,检查用户是否使用 api 密钥 isLoggedIn。
如果 api 密钥不存在,用户当然没有登录,服务器将发送 {"autheticated": false} 401 响应。如果用户有一个 api 密钥,它会使用该 api 密钥在服务器上检查它是否有效(登录)或无效(未登录)。
为了捕捉路线并检查用户是否经过身份验证,我使用“stateChangeStart”
第一个问题是在初始页面加载时不会触发状态更改,并导致使用 routeProvider 转换到登录页面。然后在整个应用程序中,如果请求的路由不在配置的路由中,它将转换到登录页面但不会触发 stateChangeStart。所以用户可以登录并坐在登录页面上。我宁愿它作为我配置的路线转移到仪表板。
在大多数情况下,这种设置在理论上似乎可以正常工作,但路线很不稳定。因此,在检查用户是否登录之间会发生什么,路由将开始更改并开始显示页面,但是当应用程序意识到用户未登录时,它将切换到登录页面。我想解决这种波动。而不是得到其他页面的一瞥能够正确传输。
我在应用程序中使用 ui-router 和状态来处理所有事情。然后使用 Route Provider 仅在没有请求路由的路由时执行 $routeProvider.otherwise('login') 。
我想弄清楚如何在应用程序检查正在验证的用户时在路由转换期间停止显示部分新页面(断断续续)。无论是在我不知道的不同事件中还是其他情况。
还有一种更好的方法是使用 routeProvider.otherwise() 来触发状态更改并检查用户是否已登录。如果已登录,则转移到仪表板,如果未登录,则留在登录页面,直到完成登录。
对不起,如果这太令人困惑了。我是 angularjs 的新手,并且一直在阅读我能找到的关于路由、状态和身份验证的所有内容。这是我学习如何在服务器端使用 Angular 管理身份验证的一个新概念。
- 编辑
在接受 MBielski 的建议后,我已经在各州实施了使用 Auth.isLoggedIn() 服务的解决方案。但这仍然没有消除切换路线的波动,我什至担心一旦这不在本地开发中,等待 api 响应时波动会变得更糟。这是我的父仪表板状态的解析代码。
javascript - 当在指令的模板中时,如何让角度 ui-router 的 ui-sref 工作?
基本上,我正在尝试更改/自定义 ui.bootstrap.accordion 的行为。一切正常,除了与 ui-router 集成。
这是我想使用手风琴的方式:
下面是手风琴的修改模板:
基本上,'site.home.newsID_X' 需要替换模板中 ui-sref 的 'site' 值。
我的尝试是通过手风琴组指令的链接函数中的“元素”参数设置 ui-sref 属性的值,如下所示:
这确实更新了目标 ui-sref,但是 ui-router 不会从引用状态的 url 生成相应的 href,所以在渲染 DOM 之后,我得到了
而不是预期的
我错过了什么?
我很感激你的时间,
杰瑞德
angularjs - AngularJS 和 ui.route 无缝导航
我有一个问题。我正在构建一个 Angular 应用程序,我正在使用 Angular ui 路由器。
我想停止从一页到另一页的导航,直到我运行 dom 动画
我知道我有 onStateSuccess 和 onStateStart 但在运行动画之前我不知道如何停止进入该状态。
我知道我可以导航,$state.go('localhost')
但我正在寻找一种更好的方法来停止和恢复活动。
有任何想法吗?
编辑
我看到我可以在更改开始时停止事件,有没有办法在我运行几个函数后恢复它?
javascript - Angular.js UI-Router 子范围
我正在使用 ui-router 库(https://github.com/angular-ui/ui-router),我对嵌套视图/路由有些困惑。
这是我配置路由的方式:
当您访问/networks
时,页面左侧会显示一个网络列表(类似于此处的 ui-router 示例:http: //angular-ui.github.io/ui-router/sample/#/contacts)。单击其中一个网络名称会在页面右侧显示详细路由,其中包含可单击的列表shows
。
但是,我感到困惑的部分是,如果我希望networks.detail.show
页面实际存在于它自己的整页上并保持父级的范围network.details
怎么办?我能够想出的唯一方法是在networks.detail.show
路线上,您可以看到我已经覆盖它以使用主视图(这正在杀死范围)。
我觉得我看错了,所以任何建议都将不胜感激。
谢谢你的时间,
-瑞恩·S。
javascript - 如何使用 ui-router 将子或孙状态设置为默认索引状态?
我正在使用带有 ui-router 的角度。我想做的是当用户浏览到以下链接时:
它们都默认显示与带有默认 :id 的链接/contacts/:id相同的内容,并且 url 保持不变(不会更改为/contacts/:id)。
ui-router wiki 上有一个关于此的常见问题解答,但它没有演示如何使用孙子甚至更深的后代状态进行初始化。
我尝试了几种不同的状态设置,但均无济于事。我做错了吗?这是示例页面:
javascript - 如何将数据库中的 html 标签注入到我的指令模板中,实际上是动态定义模板的根元素/标签?
我想用数据库中的数据动态构建一个模板(在我的例子中是 Firebase/angularFire)。模板的构建方式取决于使用 angularFire 检索的每个对象中的 tag 属性。我的第一种方法:
这几乎可以工作,但是 tag.tag 是未定义的,而不是实际的标签,这是可以理解的,因为使用这些函数的编译函数将在 angularFire 获取和绑定数据之前运行。这是我的第二种方法:
但这只会重复呈现 txtTemplate 的文字字符串的一部分:
对于使用 ng-repeat 而不是实际的 html 迭代的每个“标签”元素。
这是我的指令的编译功能:
数据是在 angular.ui.router 状态的控制器中从 Firebase 获取的:
模板 content.html 如下所示:
- 我确实需要 angularFire 提供的三向绑定。
- 标签必须来自 firebase,不能使用文字代替(在最终版本中,这个标签可以是任何东西)。
如何确保在编译函数使用它进行比较/赋值之前填充“标签”属性?
无法在编译函数中使用 angularFire 服务,因为没有将获取的数据绑定到的范围。
由于某种原因,angularFire 在链接函数中不起作用,即使它是,我认为它不会有太大帮助,因为我仍然需要构建模板。
我应该在编译函数中使用 Firebase 的 js api 而不是 angularFire?
如果是这样,我将如何使 angularFire 提供的三种方式绑定工作?
谢谢你的时间
杰瑞德
angularjs - 如何根据传递的参数的值使用 ui-router 更改模板?
我设置了以下内容:
我真正想要的是,如果 :question 的值是一个数字,它可以使用模板 questionDetail.html,如果不是数字,那么 content.html
有谁知道这样做的方法?