问题标签 [angular-ui-bootstrap]

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.

0 投票
1 回答
13252 浏览

javascript - 如何在 AngularJS 手风琴正文中获取动态内容

我可以看到如何在手风琴正文中获取静态内容,但不知道如何生成动态内容。

http://angular-ui.github.io/bootstrap/为例,手风琴是从 ...

我想要实现的是从两级结构生成手风琴,因此......

每个手风琴的身体看起来像:-

这样生成的 HTML 看起来像:-

我放在内容下的任何内容似乎都被实例化为 innerHtml 而无需任何处理。

0 投票
1 回答
10574 浏览

angularjs - 折叠 ng-repeat 列表

我正在尝试在 ng-repeat 项目列表上使用 ui-bootstrap 的折叠。我已将 ui.bootstrap 添加到我的模块中,并制定了这个 html:

一切看起来都应该有效,即使单击链接我看到 html 中的“折叠”来自:

至:

但是我没有看到任何东西实际上崩溃了。一切都停留在屏幕上的位置。有任何想法吗?

0 投票
1 回答
414 浏览

angularjs - 如何将某些状态作为查询参数保存到 URL

我正在使用带有 ui-bootstrap 1.0.4 的 AngularJS 1.0.7。

我的应用程序有一个主导航栏,一些页面有一个额外级别的选项卡(使用 ui.bootstrap 选项卡集和选项卡指令)。

我想要完成的是:

单击选项卡将更新 URL,添加“?tab=name”查询参数。开发人员将为每个<tab>元素添加一个附加指令以标识名称。

加载视图时,某些东西(这就是问题)将侦听事件(哪个事件?)并更新选项卡,调用select()选项卡范围内的函数。

我一直在为此苦苦挣扎。基本上,操作顺序是我的方式;$routeChangeSuccess 事件接近我想要的,但是 ngView 指令使用它来加载内容。这意味着监听 $routeChangeSuccess 的指令直到事件被广播后才存在。

查看源代码,我可以看到有一个 $viewContentLoaded 事件。然而,这个时机也很奇怪。

这是我所拥有的:

为了完成这项工作,我让视图的控制器调用 TabSupport 服务;我也禁用reloadOnSearch.

我看到的是,即使 $viewContentLoaded 事件也为时过早(令人困惑)。

然后我更改了代码以推迟 activateTab 广播(使用$timeout)。

现在,在接收到 activeTab 事件之前,监视“活动”表达式的代码过早触发。这是因为当没有显式激活选项卡时,选项卡集会选择第一个选项卡。

那么,任何人都可以提出更好的方法吗?我更喜欢 URL 中的值作为查询参数,但它可以很容易地在本地存储或路径中......但这不是问题。问题在于构造视图及其嵌套指令的操作顺序。

感谢您的任何指点!

0 投票
1 回答
2598 浏览

twitter-bootstrap - AngularJS和UI - 在选项卡内时无法访问外部表单

我正在使用 AngularJS 1.0.5 版和 Angular UI (Bootstrap) 0.4.0。我正在尝试集成 2 个功能:UI 的选项卡和 Angular 的表单。

我有嵌套表格。一种形式 (outerForm) 包装了整个标签集。另一种形式 (innerForm) 位于一个选项卡中。

我想在选项卡之外有一个按钮,它将根据innerForm的有效性启用\禁用!

当我尝试从表单本身外部访问 innerForm.$valid 时,它不起作用。

这是一个plunker: http ://plnkr.co/edit/sEz8TG?p=preview

现在,当我尝试使用常规 Bootstrap 进行相同操作时,它似乎确实有效: http ://plnkr.co/edit/Somic4?p=preview

当内部表单位于常规 div 中时,我可以从外部访问它。当我使用 Angular UI 的特殊“制表符”语法时,它不再起作用了。

0 投票
1 回答
610 浏览

angularjs - 用于调用 UI Bootsrap 模态的角度指令

我正在尝试制定一个指令来调用模式(使用 bootstrap-ui)来更新一些属性。模态内容会根据调用位置的不同而有所不同。

更新

我做了一个plunker来说明这一点(由于moderndegree的贡献而更新和工作)

现在,是否可以从 html 文件中将模态的 html 代码外部化并将模态控制器函数放在指令中,这样就可以从不同的模板中调用它?

0 投票
1 回答
3814 浏览

angularjs - 使用 Angular UI Directive Typeahead 重定向到链接

我正在为项目使用 Angular UI Bootstrap 预输入指令,并且我想根据预输入中选择的内容重定向到动态 URL。我正在尝试使用预输入作为搜索框。

我查看了文档(尝试使用 RTFM),所以我知道有一个typeaheadOnSelect可以使用的属性,但我不确定如何将它与链接联系起来。我正在使用对象的 JSON 文件,每个对象都有一个特定的 ID。我希望能够像这样直接在 typeahead 属性中链接:

但这没有用。我想我需要一个特定的控制器,但我不确定。typeahead 指令似乎工作得很好,所以我想有一个简单的解决方案,但我找不到它。

现在,我的 Typeahead 控制器如下所示:

这个 plunkr显示了一切。我的这个项目的路由器是使用基于每个 JSON id 的动态 URL 设置的,如下所示:

0 投票
1 回答
1609 浏览

angularjs - 将数据传递给 Angular 的嵌套控制器

问题

dialog在我的应用程序中使用 UI Bootstrap 的服务,该服务创建模态对话框,我在外部使用以下方法执行此操作$scope

稍后使用以下标记从局部视图调用此方法

我的对话框处理一个routeroute是主模型中的子模型)的编辑,因此我想将该路径传递给对话框,以便它像对待自己的模型一样对待它,而不需要对外部模型一无所知。

我对这个问题的最初猜测是将路由参数分配给dialog变量,类似于dialog.route = route稍后在控制器中使用以下代码:

尽管这种方法会产生依赖性并且看起来不像 Angular 的做事方式

我还发现这篇文章说我应该为此目的使用服务,但对于这样的小问题,这个解决方案似乎有点过头了。

问题

使用上述场景将值从外部控制器传递到内部控制器的角度方式是什么。

谢谢

0 投票
3 回答
4815 浏览

angular-ui-bootstrap - 如何为角度 ui-bootstrap 选项卡指令指定 href 参数

我正在使用角度 ui-bootstrap 库,但我不知道如何为每个选项卡指定自定义href

在角度 ui-bootstrap 文档中,指定了一个可选参数select()但我不知道如何使用它来自定义每个选项卡的链接

改写问题的另一种方法是如何使用带有角度 ui-bootstrap 选项卡的路由

0 投票
1 回答
22010 浏览

angularjs - Angular UI Bootstrap - 弹出日期选择器

我希望在使用 Angular UI Bootstrap 库的组件单击按钮时弹出一个日期选择器。Angular UI Boostrap网站上都有这两种方法的示例,但我没有看到将它们结合起来的方法。我不喜欢将 Datepickerdiv作为popup指令文本的属性值的想法。

我也尝试ng-show在 Datepicker上使用,div但我也无法正常工作。

这是我目前拥有的代码。

我真的不喜欢这个ng-show策略。宁愿它是一个弹出窗口,但我认为也有办法做得更好,所以我也不介意。

0 投票
0 回答
328 浏览

angularjs - 在嵌套控制器上调用方法

我有一个 Angular 应用程序,当我单击某个元素时会显示 ui.bootstrap.modal 对话框。我想让模态逻辑可重用,因此将其分离到一个单独的控制器中。结果(简化)如下所示:

模态的可见性由 ModalController 上的一个属性控制:

如何从open()方法上设置该属性MyController