问题标签 [angular-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 投票
4 回答
32508 浏览

angularjs - 将 ui-router 与 Bootstrap-ui 模态一起使用

我知道这已经被讨论过很多次,大多数文章都引用了这段代码:Modal window with custom URL in AngularJS

但我就是不明白。我觉得这根本不是很清楚。我还发现这个jsfiddle实际上很棒,非常有帮助,除了它不添加 url 并允许我使用后退按钮关闭模式。


编辑:这是我需要帮助的。

所以让我试着解释一下我想要达到的目标。我有一个添加新项目的表格,我有一个链接“添加新项目”。我想当我单击“添加新项目”时会弹出一个模式,其中包含我创建的“add-item.html”表单。这是一个新状态,因此 url 更改为 /add-item。我可以填写表格,然后选择保存或关闭。关闭,关闭模态:p(多么奇怪)。但我也可以单击返回以关闭模式并返回上一页(状态)。 在这一点上,我不需要 Close 的帮助,因为我仍在努力让模态正常工作。


这是我的代码:

导航控制器:(这甚至是放置模态函数的正确位置吗?)

这就是我激活模式的方式:

新项目.html:

此外,虽然这确实打开了一个模式,但它并没有关闭它,因为我无法解决这个问题。

0 投票
1 回答
2142 浏览

angularjs - 如何从外部控制器中选择一个选项卡

我正在使用这里Tabs (ui.bootstrap.tabs)描述的控制\指令。该控件创建它自己的控制器,该控制器设置活动选项卡:

Tabset 子选项卡控件(子元素)在单击时可以触发父级的选择功能。

我有我的自定义控制器向上的 DOM 需要触发select功能TabsetController以设置第一个选项卡处于活动状态。我读过我可以使用事件广播,但我无法修改TabsetController绑定事件侦听器,所以这似乎不是一个可行的选择。有什么建议么?

编辑:

请参阅 Plunker 以获得更好的理解 -在这里

0 投票
0 回答
198 浏览

angularjs - 如果适用于一个 html 元素的两个控制器在作用域上定义它,作用域属性会发生什么

我有以下 HTML:

然后我有一个定义,MainController它将tabs属性添加到范围:

然后来自这里tabset的指令还引入了它自己的控制器,它也定义了范围上的属性:TabsetControllertabs

哪个控制器的tabs属性将用于元素?请参阅此 Plunker以获取完整示例。

0 投票
1 回答
205 浏览

javascript - 在打开的 Angular UI Bootstrap Modal 中更新父控制器范围时,该函数仅运行一次

重构测试应用程序后端代码后出现问题。测试有问题和答案,每个问题都有多个答案,只有一个是正确的。

经过一些调试后,一切似乎都运行良好,但所有问题和答案管理逻辑都位于一个控制器中。我将答案逻辑移动到单独的嵌套控制器,然后遇到了这个问题。尝试了不同的方法,但没有一个有帮助。

目标是将 Angular UI 树(示例 #4 - 组和类别)与 Angular UI Bootstrap Modal 结合起来。

通过设计添加和编辑问题和答案是在模式窗口中发生的。该模板位于单独的位置,因此不会在每个问题和答案中重复。当提供的数据无效时,将显示验证错误,否则显示成功警报并清除所有字段并返回默认状态(所有在模式窗口内发生的事情,它保持打开状态,只能通过点击“取消”来关闭, X 按钮或键盘 Esc 按钮)。

我需要QuestionsCtrl $scope.questions从模态窗口更新(触发按钮位于模态窗口的模板内)。点击“添加”按钮后$scope.questions,范围内将更新,ui.tree 也会在后台更新。未显示成功警报或验证错误,表单字段未清除。重复点击不会再次调用实际函数(因此它只运行一次)。

没有模态窗口但使用嵌套控制器添加工作正常。

我创建了plunk并删除了所有冗余代码,因此专注于问题会更容易。如果需要,我可以提供更多代码。例如在console.log只显示一次的 plunk 结果中。

0 投票
1 回答
5460 浏览

css - AngularJS bootstrap ui - how do I change css styles?

I am using bootstrap UI with AngularJS directives and I want to change the default styles bootstrap applies for its elements.

Should I target the HTML contents from the template?

Based on the examples given in the documentation I want to use the accordion.

When I define it in HTML, it has the following structure:

But when the directive processes the template it turns it into the following HTML:

As you can see, it changes it quite significantly. If I wanted to change how the panel title is displayed, should I write this in my css files?

and hope that the template doesn't change in the future?

What is the best approach to changing styles for HTML elements generated by a directive's templates?

0 投票
1 回答
1231 浏览

angularjs - 当您无法将工具提示添加到

我正在使用工具提示进行错误解释和着色以指示错误。在我的日期选择器字段中,我对需要显示的日期范围进行了一些验证。但是,如果我尝试将日期选择器和工具提示放在同一个输入元素上,我会得到

多个指令 [datepickerPopup, tooltipHtmlUnsafe] 要求新的/隔离的范围:<input

在我从使用 bootstrapjs 代码处理工具提示的旧版本“升级”到 angular-bootstrap 之前,这不是问题。

是否有一些简单的方法可以使用日期选择器输入上的焦点来弹出工具提示,即使输入字段无法获取工具提示指令?

现在我把它作为一个悬停在标签上,就像你电视上的潜意识信息一样明显。

我有一个带有隔离范围的字段指令,它涵盖了输入和与之关联的标签,所以这就是我必须使用的上下文。

0 投票
1 回答
6441 浏览

angularjs - Angular bootstrap typeahead 不适用于 Angular 1.3.0

我创建了一个小 plunker 来表明这不起作用。任何人都可以帮助我如何使用 1.3.0 angularJS 的预输入/提供替代解决方案。我们将它与 angular-bootstrap 0.11.0 和最新版本的引导程序一起使用。我们的代码严重依赖 1.3.0 中引入的 ng-messages

这是plunker链接

如您所见,点击事件、向上箭头和向下箭头不起作用。添加一些代码让我很开心。:)

0 投票
1 回答
115 浏览

angularjs - 如何获得一个带有角度指令和角度引导的按钮组的 ui-view

所以我试图让一个指令可以填充一个 btn 组,但有问题。如果我将 btn btn-default 类放在指令 html 中,它将正确分组,但按钮会插入到其他按钮中。如果我将 btn btn-default 类放入模板中(在按钮标签中),那么它不会正确分组。

查看定义

搜索指令模板

指令代码

这也是基于 ui-router 的 ui-view 嵌入的问题,它基于状态动态加载按钮。

用 plunker 更新:

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

0 投票
1 回答
2014 浏览

angularjs - Angular Bootstrap Datepicker 多种格式

当尝试为 Date Picker 定义多个输入日期格式时,我们似乎遇到了只能定义一种格式的问题。如果不满足此格式,则默认为美国化日期格式 (MM/dd/YYYY)。

例如,如果我们将格式设置为 dd-MM-yyyy,但输入日期为 7/8/09,这将被解释为 2009 年 7 月 8 日。

有没有一种方法可以接受和验证多个日期格式,例如:

0 投票
3 回答
842 浏览

angularjs - 使用数据初始化 ngModel - AngularJS Bootstrap bs-select

我正在维护一个站点,该站点允许用户创建各种配置文件,以允许他们将活动广播到提要。我实现了 ng-grid 来跟踪所有创建的配置文件,并创建了两个按钮,允许用户创建/编辑这些配置文件。我现在唯一的问题是,当用户在网格上选择一行并尝试编辑该特定行时,下拉菜单不会自动填充来自 ngModel 的数据。

这是我遇到问题的表格的一部分:

在控制器中,我将 sourceCanSendTo 定义为:

在行选择时,我只需设置 source = 所选项目,console.logs 显示所有数据都在那里。表单的其他部分正在正确填充(主要是 s),并且 console.log($scope.source.canSendTo) 显示原始数据在那里,只是选择默认为空白......我怎么会尝试在我目前拥有的下拉选择中预先选择某些元素?

例如,如果配置文件选择了“abc”、“bcd”,我怎样才能使当我编辑该配置文件时,下拉框显示“abc,bcd”而不是“未选择”?

编辑:我之前回复了一条询问 bs-select 的评论,说它只是控制了下拉框的一些 CSS 元素——在谷歌快速搜索后似乎这完全不正确,而其他一切都导致了死胡同。有谁知道如何用数据正确初始化模型,以便在我预加载表单时,“可以发送到”下拉选择实际上选择了选定的选项,而不是说“没有选择”?提前感谢所有帮助!