问题标签 [angular-ui-bootstrap-tab]

我正在创建一个 web 应用程序，我想实现一个添加朋友的选项。我已经将添加朋友页面创建为带有文本输入字段的模式。我想通过在我的视图页面上显示输入来测试这一点。如何在我的视图页面上显示这些数据？

这是我目前拥有的

索引.html

我的 JavaScript 文件：

plunkr：http ://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview

Angular UI bootstrap 提供了很棒的解决方案。非常不幸的是分页（ui.bootstrap.pagination）在选项卡（ui.bootstrap.tabs）中不起作用

演示 http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=preview

我正在尝试制定一个指令来使用 Angular UI Bootstrap Tabs。
该指令的主要目的是记住已选择的选项卡。
我已经查看了所有的解决方案，但似乎没有一个可以解决未在控制器中设置的选项卡的问题：

注意“sctab”是我的指令名称。在这里，我有以下工作：

• 单击一个选项卡，它将设置 url 哈希作为选项卡标题名称
• 如果您单击链接然后返回，则会记住该哈希值。
• 在页面加载时识别与哈希匹配的选项卡（或元素）

但是，我在最后一步遇到了障碍：

• 激活与 url 哈希匹配的选项卡

为此，我尝试了几件事，您可以在下面的代码中看到。没有一个完全奏效。

我相信活动状态是在 ui 引导选项卡指令的隔离范围变量中设置的，称为“活动”。

ngClass 也绑定到这个变量：

所以基本上在这里我一直在尝试为选项卡设置 active = true 以尝试激活选项卡（无济于事）。
在详细介绍之前，我将在这里停下来看看是否有人根据我的尝试有想法。
这是我的指令：

我在实现粘性选项卡时遇到问题，其中每个选项卡都可以使用 ui-router-tabs 和 ui-router-extras 有多个子状态。

1. 当我打开一个状态，移动到另一个状态，然后返回到第一个状态时，相应的控制器正在重新初始化（尽管 ui-router-extras 调试输出显示它重新激活了该状态）

2. 当我打开同一个选项卡的另一个状态（兄弟状态）时，调试输出、html 模板的 url 和请求告诉我新状态已加载，但选项卡显示空内容和 api 调用状态未执行

这是我的状态/路由配置：

“home”状态包含所有选项卡的 ui-view 以及导航栏。每个抽象状态代表一个选项卡，并包含其所有子状态的命名视图。状态的第 3 级（例如 home.feed.list）代表实际内容。

这些视图使用相同的控制器，但我已经尝试为每个视图添加一个单独的控制器。此外，我尝试删除 ui-router-tabs 并通过 url 调用状态，结果相同。

示例调试输出：home.feed.list -> home.create.form -> home.feed.list（抱歉没有足够的声誉来发布图片）

当我使用 3 个不同的控制器时会生成相同的输出（“我正在初始化..”在每个控制器上执行）。

我目前正在尝试创建一个包含两个嵌入部分的指令，但到目前为止还没有成功。现在我发现tabAngular UI Bootstrap 的指令就是这样做的！不幸的是，他们在源代码中使用的角度诡计显然太先进了，我无法理解。

在示例中，它们具有以下代码：

这正是我需要的。有人可以向我解释我需要采取的步骤，以便将<tab-heading>内容嵌入一个位置，而将其他内容嵌入另一个位置吗？

我在来源中不明白的事情：

• 没有指令tabHeading只有一个tabHeadingTransclude. 那么如何<tab-heading>找到元素呢？我也没有在任何地方看到对此类元素的查询。
• 我也不明白这两个 transclude-directivestabContentTransclude和tabHeadingTransclude.

以下代码未显示弹出时间选择器。知道如何解决吗？

代码：

我们正在努力使我们的应用程序尽可能易于访问。我们需要让客户在整个应用程序中始终将手放在键盘和标签上。我们正在使用 angular-ui/bootstrap 水平导航选项卡来显示和收集每个选项卡面板中的数据。目前，我们无法找到一种非鼠标方式将焦点从选项卡向下转移到选项卡面板中，以允许将焦点放在可选组件上。

选项卡集是为仅供查看的内容构建的吗？如果没有，我们如何将注意力集中在选项卡面板中的可编辑/可选择组件上？

HTML：

JS：

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('test', function ($scope) { });

我正在尝试将包含无效字段的第一个选项卡集中在表单提交上。我确实设法专注于第一个输入字段，但如果该字段位于另一个选项卡中，它就不起作用而且我不知道如何使它起作用。

这是我的html文件：

专注于第一个无效输入的指令：

我将不胜感激任何帮助。

我想在使用 AngularJs 和 UI Bootstrap 的动态生成选项卡的内容中使用 ng-include。

我在这里有一个 Plunker：http://plnkr.co/edit/2mpbovsu2eDrUdu8t7SM?p= preview

JS代码：

在 Plunker 中，单击“添加选项卡”按钮。它调用 $scope 中的一个函数，该函数将一个新选项卡推送到集合中，但传入一些动态生成的内容，其中包括一个 ng-include 指令。预期的输出是 ng-include 将显示在选项卡内容区域内。

谢谢

我面临角度引导 ui 静态选项卡默认选择的问题。

我在模型弹出窗口中有大约七个这样的选项卡。我想根据值设置默认选项卡。我做过这样的事情

在脚本中

问题是它总是选择第一个选项卡，无论范围字段如何