草庐IT

javascript - 选项卡的 AngularJS Controller

coder 2024-07-24 原文

我的页面中有三个选项卡。我正在使用 tabset和 tab根据 Angular Bootstrap Docs .

我为 <div> 设置了一个 Controller 其中有 tabset作为

<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel"> 
  <tabset  class="panel-body">
    <tab heading="Tab 1"> </tab>
    <tab heading="Tab 2"> </tab>
    <tab heading="Tab 3"> </tab>
  </tabset>
</div>

对应的页面是

但是，当我尝试为我的第二个选项卡添加另一个 Controller 时 

<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel"> 
  <tabset  class="panel-body">
    <tab heading="Tab 1"> </tab>
    <tab heading="Tab 2" ng-controller="Tab2> </tab>
    <tab heading="Tab 3"> </tab>
  </tabset>
</div>

我现在发现标题不显示了，我不能再点击Tab2。

这是为什么呢？如何恢复相同的功能？

这是在现有 Controller 中添加另一个 Controller 的正确方法吗？

我的 app.js :

var myApp = angular.module('myApp',['ui.bootstrap']);

myApp.controller('Tabs', function ($scope) {

});


myApp.controller('Tab2', function ($scope) {

});

最佳答案

我认为至少可以通过三种方式组织 Controller 代码:

  1. 一切尽在 TabController
  2. 每个选项卡的自定义指令
  3. 将您的选项卡逻辑添加到选项卡回调函数。

请查看下面或此处的演示 jsfiddle .

这是ui-bootstrap添加了上述要点的示例代码。 

angular.module('demoApp', ['ui.bootstrap'])
    .controller('TabsDemoCtrl', TabsController)
    .directive('sepecialTab', SpecialTab);

function TabsController($scope, $window) {
    $scope.tabs = [{
        title: 'Dynamic Title 1',
        content: 'Dynamic content 1'
    }, {
        title: 'Dynamic Title 2',
        content: 'Dynamic content 2',
        disabled: true
    }];

    $scope.alertMe = function () {
        setTimeout(function () {
            $window.alert('You\'ve selected the alert tab!');
        });
    };

    $scope.thirdTabCallback = function () {
        $scope.test = 'I\'m the third tab callback';

        $scope.clickme = function () {
            $window.alert('third tab only function');
        };
    };
}

function SpecialTab() {
    return {
        restrict: 'A',
        controller: function ($scope) {
            console.log('Special tab ctrl, runs on start.');
            $scope.hello = 'hello from special tab controller';
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="TabsDemoCtrl">
    <p>Select a tab by setting active binding to true:</p>
    <p>
        <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
        <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
    </p>
    <p>
        <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
    </p>
    <hr />
    <tabset>
        <tab heading="Static title">Static content</tab>
        <tab heading="Static title 2" sepecial-tab="">Static content2 {{hello}}</tab>
        <tab heading="Static title 3" select="thirdTabCallback()">Static content3 {{test}}
            <button ng-click="clickme()">click me</button>
        </tab>
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">{{tab.content}}</tab>
        <tab select="alertMe()">
            <tab-heading> <i class="glyphicon glyphicon-bell"></i> Alert!</tab-heading>I've got an HTML heading, and a select callback. Pretty cool!</tab>
    </tabset>
</div>

关于javascript - 选项卡的 AngularJS Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31753558/

javascriptController34tabgtangularjstwitter-bootstraptabsng-controller

有关javascript - 选项卡的 AngularJS Controller的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  5. ruby - 选项卡的 Rubocop - 2

    我们想使用Rubocop来验证我们的ruby​​在语法上是否正确并遵循基本代码指南。除此之外我们有这个规则:我们使用制表符缩进以允许任何人决定他们希望如何呈现它们(将它们显示为2或4个空格)问题是rubocop似乎设计为完全拒绝缩进标签。我们怎样才能超越所有这些规则成为太空合规者？编辑:我正在考虑覆盖这个模块https://github.com/bbatsov/rubocop/blob/master/lib/rubocop/source_parser.rb将我文件中的所有制表符替换为2个空格，以创建gem的幻觉... 最佳答案 添加

  6. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - 用一系列时间增量填充选择，加上其他选项 - 2

    使用RubyonRails，我使用给定的增量(例如每30分钟)用时间填充“选择”。目前我正在YAML文件中写出所有的可能性，但我觉得有一种更巧妙的方法。我想我想提供一个开始时间、一个结束时间、一个增量，并且目前只提供一个名为“关闭”的选项(想想“business_hours”)。所以，我的选择可能会显示:'Closed'5:00am5:30am6:00am...[allthewayto]...11:30pm谁能想出更好的方法，或者只是将它们全部“拼写”出来的最佳方法？ 最佳答案 此答案基于@emh的答案。defcreate_hour

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - 如何获取适用于 ruby​​ 1.9.1 的 to_yaml 方法的格式化选项？ - 2

    根据YAML文档，可以传递hashofoptions到.to_yaml方法。目前，当我按照文档中的建议传递选项时，它不起作用，哈希被忽略。irb(main):001:0>require'yaml'=>trueirb(main):002:0>user={"1"=>{"name"=>"john","age"=>44}}user.to_yaml=>"---\n\"1\":\nname:john\nage:44\n"现在，传递一些选项:irb(main):014:0>user.to_yaml(:Indent=>4,:UseHeader=>true,:UseVersion=>true)=>"--

随机推荐