Angular - 不同的路线,相同的模板/控制器,不同的加载方法

2024-01-02

我想使用路线,但我总是想使用相同的模板和控制器。我有这样的路线:

**a/:albumid**

and

**i/:imageid**

在第一种情况下,我想加载图像数组并将它们添加到列表中。在第二种情况下,我想加载单个图像并将其添加到列表中。

所以区别仅在于数据加载。做到这一点最有效的方法是什么?

ng-show 是否可以制作动画?类似于 jQuery 的 SlideDown 之类的东西?


看看这篇文章,它描述了一种完全按照你想要的方式做事的方法:

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

我已经使用了该技术,效果很好。

简而言之,路由是这样的:

$routeProvider
    .when("/a/:album_id", {
        action: "album.list"
    }).when("/i/:imgid", {
        action: "images.load"
    })

然后在你的控制器中你可以访问$route.current.action并做适当的事情。诀窍是在控制器中创建一个函数来完成所有工作(本文将其称为render()) 然后在 $routeChangeSuccess 触发时调用该函数:

$scope.$on(
   "$routeChangeSuccess",
   function( $currentRoute, $previousRoute ){
        // Update the rendering.
        render();
    }
);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular - 不同的路线,相同的模板/控制器,不同的加载方法 的相关文章

  • Angular UI bootstrap 手风琴 - 展开创建可滚动和页面“跳转”

    我正在使用 Angular ui 引导手风琴 一切都很好 除了当我展开一个足够大的手风琴部分时 浏览器会显示页面的滚动条 整个页面会向左摇动滚动条的宽度 当手风琴足够小以至于不需要滚动条时 页面会恢复到原始大小 我不知道该怎么办 这是否需要
  • Ruby on Rails - 向所有路由添加 ID 参数

    我想知道在 Rails 路由中实现以下功能的最佳方法是什么 场景 一个网站 用户注册账户 gt accountID 账户 成为网站内的主要实体 例子 https basecamp com ID https basecamp com ID 将
  • ng-bootstrap ngbDropdown 在 Angular 4 中不起作用

    在我的 Angular 4 应用程序中 ng bootstrap 中的 ngbDropdown Element 不起作用 对于这种情况 我安装了以下 npm 模块 ng bootstrap ng bootstrap 1 0 0 alpha
  • 在 Karma+AngularJS 测试中加载模拟 JSON 文件

    我有一个 AngularJS 应用程序 使用 Karma Jasmine 设置了测试 我想测试一个函数 它接受一个大型 JSON 对象 将其转换为应用程序其余部分更容易使用的格式 然后返回转换后的对象 就是这样 对于我的测试 我希望您有单独
  • Angularjs 抛出 TypeError:无法读取未定义的属性“indexOf”

    我正在尝试调试上面的代码 我觉得这非常有用 gt 我什至找不到代码中的问题 也不知道从哪里开始 因为 Angularjs 对我来说仍然很新 我正在尝试本地化 Angularjs 应用程序 我知道为了获得帮助而缺少很多上下文 但我正在尝试查看
  • AngularJS,使用没有后退按钮刷新的路由

    我在用着angularJS使用 AJAX 构建一个简单的单页应用程序 但是当用户使用本机后退按钮时我遇到了问题 angular module myApp ionic myApp controllers myApp services conf
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • 为 HTML5 Django Web 应用程序实现实时通知系统

    我目前正在开发一个由 Django apache 提供服务的 HTML5 Web 应用程序 该应用程序的目标是监视多个设备 所有客户端逻辑都是用 Angular 编写的 所有数据都来自对后端进行的基于 JSON 的类似 REST 的调用 我
  • 当我的网页上有一个持续时间计数器时,AngularJS 有什么帮助吗?

    我有一个使用 Angular ui router 的应用程序 当路由器设置为某种状态时 我希望将计时器设置为例如 2 小时 当它设置为另一个状态时 我想让计数器倒计时 我希望在屏幕上显示剩余时间 有谁有关于如何实现此功能的代码示例吗 如果有
  • AngularJS 插值错误

    我正在显示房间的属性 作为我正在开发的房间管理应用程序的一部分 这是输出 如您所见 Beamer 英文投影仪 的值为 Sony lamp 01 12 2013 此输出是正确的 但当我打开控制台时 我看到一些有关插值的错误 更大的分辨率 Ca
  • 如何删除 ng-repeat 的默认顺序

    如何停止动态表数据的 ng repeat 内部的默认排序 目前我收到以下订单 地址 客户 ID 姓名 但我想要的是以下顺序 客户 ID 名称 地址 任何帮助我将不胜感激 JS app controller MyController func
  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这
  • 如何以最少的查询次数获取帖子列表和关联标签

    我的表格结构如下 标签 更多的是一个类别 id 标签名称 描述 slug POSTS ID 标题 网址 邮戳 id idPost idTag USERS ID 用户名 userSlug VOTES id idPost idUser 每个帖子
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 从指令动态地将角度属性添加到元素

    我正在尝试构建一个指令来更改缓慢的 ajax 调用按钮上的加载状态 基本上 这个想法是为按钮元素设置一个属性 ng loading 并让指令添加其余的内容 这是html代码
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • 主页的 RefineryCMS 路线不起作用

    刚刚开始使用RefineryCMS 抱歉新手问题 它在本地运行良好 并幸运地部署在 Heroku Cedar 堆栈上 创建了一个名为 主页 的页面 pages home 响应良好 路线 rb root to gt pages home 并在
  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • AngularJS:Array.prototype.find() 在 Chrome 中不起作用

    我遇到一个问题 我的角度代码可以在 Firefox 中工作 但不能在 Chrome 中工作 浏览器控制台打印如下 TypeError undefined is not a function at setSelectedColor http
  • 如何在 angular-ui 中动态禁用 ui-sortable 指令

    我正在使用 Angular ui 使用 ui sortable 指令进行排序 是否可以根据范围状态动态启用 禁用可排序功能 因此 我需要一个按钮来更改范围属性的状态 并且根据此属性可排序是否应该工作 角度指令支持观察可排序选项何时发生变化

随机推荐

  • ruby 对于所有 x 是否有恒等函数,即 x.fn == x?

    有时 当我将方法名称作为参数传递时 我发现自己希望有一个恒等函数 这样any obj send identity any obj 所以代替这个 transform nil my obj my obj send transform 我可以写
  • mongoDB:通过嵌入值查找

    我在 mongoDB 方面遇到了一些问题 我寻找答案 但找不到任何东西 这解决了我的问题 db coders save name John languages php bad java good brainfuck very bad db
  • Xpages:让 FullCalendar 与引导主题一起使用

    Per 的回答是解决方案的重要组成部分 为了完整起见 这是我最终要做的 首先 我必须解决 Per 提到的 AMD 问题 然后我必须修改我的 Xpage 以确保以正确的顺序加载正确的库 其中一些是通过反复试验完成的 我必须将资源聚合设置设置为
  • python 列表元素明智条件增量

    我已经搜索了一段时间了 基本上我正在尝试按元素有条件地按另一个列表增加一个元素列表 我的代码如下 但是有更好的方法吗 列表理解 地图 我认为像 这样的逐元素运算符来自http www python org dev peps pep 0225
  • string_view 的 C++17 运算符""?

    C 17 是否包含文字后缀const char to std string view转换 auto str asdf s 请问类型str在上面的声明中是std string or std string view 如果我们相信STL的评论 h
  • 如何设置Nuxt 3中useFetch中使用的全局API baseUrl

    如何全局设置 useFetch 可组合项中使用的 baseUrl 可能是 nuxt config ts 如何避免在每次 useFetch 中定义它 您可以定义baseURL在你的nuxt config js ts像这样 import def
  • Windows 静态库检查器?

    我知道有像 PE Explorer 这样的工具可以检查 Windows 上 DLL 的内容 导出的符号等 静态库有类似的东西吗 我正在链接生成一些链接错误的第三方库 并且我想仔细检查是否确实提供了我期望的符号 Dumpbin http su
  • 使用 JavaScript 创建表

    我有一个 JavaScript 函数 它创建一个包含 3 行 2 个单元格的表格 谁能告诉我如何使用我的函数创建下表 我需要根据我的情况执行此操作 下面是我的 JavaScript 和 HTML 代码 function tableCreat
  • VS + Cordova + WP8 = requirejs 模块加载超时

    我正在使用 Visual Studio 2015 Cordova 构建 Windows Phone 手机游戏 当尝试在设备上调试时 我收到此错误 中第 8 行第 137 列未处理的异常 ms appx web net boardgameso
  • 如何在 Vue 3 Composition API 中设置 Pinia getter

    我正在使用 Vue 3 Composition API 和 Pinia 构建 Pokemon 过滤搜索应用程序 我正在尝试设置应用程序 以便将从 Pokemon API 获取的响应传递到 fetchPokemon 函数内的商店 使用 Pin
  • ListView 标题不显示

    我正在做一个Windows Mobile应用程序6 1 我拖入列表视图并转到列并将列添加到列表视图中 当我运行列表视图时 它们不会显示 然后 我尝试使用以下代码在页面加载时通过 C 代码添加它们 ColumnHeader header ne
  • 对象的类型为“未知” - forEach 和 map

    我正在使用一个对象进行循环forEach or map 但是 我在用于循环的变量上遇到类型错误 错误是Object is of type unknown 这发生在val name val title 使用 forEach Object en
  • 如何在 ASP.NET MVC 的 RegisterGlobalFilters 方法中进行依赖项注入

    我对使用 IOC 容器还是有点陌生 而且有点挣扎 我正在使用 ASP NET MVC 5 2 和 Ninject MVC3 我有一个异常过滤器 基本上将其交给日志服务 public class ExceptionLoggerFilter I
  • CLR 如何处理静态类?

    谁能解释一下 CLR 如何处理静态类 CLR 是否创建一个单例实例来在内部处理静态类 如果不是 为什么 C 中有静态构造函数 根据我的理解 我们仅使用构造函数来实例化类 首先 CLR中没有静态类 CLR 对静态类一无所知 这是C 的特点 静
  • 记录到多个输出

    go语言有没有办法记录不同级别的多个输出 我想要一个程序 它可以同时记录到信息级别的标准输出和带有时间戳的调试级别的文件 就像我每次编码一样 log Debug Entering some func res func log Infof R
  • 取消libcurl轻松处理

    有没有一种简单的方法可以从另一个线程取消curl easy perform 您必须使用回调函数 写入 读取 进度 来执行取消 另一个线程需要设置一个标志 回调函数检查该标志并返回正确的值以取消操作
  • Numpy 从矩阵中提取行、列和值

    我有一个矩阵 我想编写一个脚本来提取大于零的值 其行号和列号 因为该值属于该 行 列 这是一个示例 from numpy import import numpy as np m np array 0 2 4 4 0 4 5 4 0 inde
  • 并行编程和多核编程有什么区别?

    我认为这个话题已经说明了一切 并行编程和多核编程之间有什么区别 如果有的话 谢谢 多核是并行编程的一种 特别地 它是一种MIMD http en wikipedia org wiki Flynn 27s taxonomy处理单元不是分布式的
  • Mysql查询平均时间

    我玩很多棋盘游戏 并且维护一个网站 数据库来跟踪一些统计数据 其中一张表记录了不同的时间 它的结构如下所示 gameName 文字 棋盘游戏的名称 人数 int 玩过的人数 时间到达 时间戳 我们到达我们正在玩游戏的房子的时间 开始安装 时
  • Angular - 不同的路线,相同的模板/控制器,不同的加载方法

    我想使用路线 但我总是想使用相同的模板和控制器 我有这样的路线 a albumid and i imageid 在第一种情况下 我想加载图像数组并将它们添加到列表中 在第二种情况下 我想加载单个图像并将其添加到列表中 所以区别仅在于数据加载