AngularJS控制器选项卡 [英] AngularJS controller for a tab

问题描述

我在我的网页三个标签。我使用根据的标签集和设置页：//angular-ui.github。 IO /引导/＃/标签相对=nofollow>角引导文档。

我设置了​​一个控制器＆LT; D​​IV＆GT; 里面有标签集为

 ＆LT; D​​IV NG控制器=标签级=面板面板默认ID =标签面板＆GT;
  ＆LT;标签集类=面板体＆GT;
    ＆LT;标签标题=标签1＆GT; ＆LT; /标签＆gt;
    ＆LT;标签标题=标签2＆GT; ＆LT; /标签＆gt;
    ＆LT;标签标题=标签3＆GT; ＆LT; /标签＆gt;
  ＆LT; /标签集＆GT;
＆LT; / DIV＆GT;
 

相应的页是

但是，当我试图为我的第二个选项卡中添加其他控制器

 ＆LT; D​​IV NG控制器=标签级=面板面板默认ID =标签面板＆GT;
  ＆LT;标签集类=面板体＆GT;
    ＆LT;标签标题=标签1＆GT; ＆LT; /标签＆gt;
    ＆LT;标签标题=标签2NG控制器=TAB2＆GT;＆LT; /标签＆gt;
    ＆LT;标签标题=标签3＆GT; ＆LT; /标签＆gt;
  ＆LT; /标签集＆GT;
＆LT; / DIV＆GT;
 

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

这是为什么？如何找回相同的功能？

这是在现有的控制器添加另一个控制器的正确方法？

我的 app.js

  VAR对myApp = angular.module（'对myApp'，['ui.bootstrap']）;myApp.controller（'标签'，函数（$范围）{}）;
myApp.controller（'TAB2'，函数（$范围）{}）;
 

解决方案

我认为至少有三种方式可以组织你的控制器code：

1. 在一切有一个 TabController


2. 为每个标签定制指令


3. 您的标签逻辑添加到标签的回调函数。

请看看下面的演示或在这里的jsfiddle 。

这是 UI-引导 例如code添加了上述要点。

\r

\r

angular.module（'demoApp'，['ui.bootstrap']）\r
    .controller（'TabsDemoCtrl'，TabsController）\r
    .directive（'sepecialTab'，SpecialTab）;\r
\r
功能TabsController（$范围，$窗口）{\r
    $ scope.tabs = [{\r
        标题：动态标题1，\r
        内容：动态内容1\r
    }，{\r
        标题：动态标题2，\r
        内容：动态内容2'，\r
        禁用：真\r
    }];\r
\r
    $ scope.alertMe =功能（）{\r
        的setTimeout（函数（）{\r
            $ window.alert（您\\'维生素E选定警报选项卡'！）;\r
        }）;\r
    };\r
\r
    $ scope.thirdTabCallback =功能（）{\r
        $ scope.test ='I \\'米的第三个选项卡回调;\r
\r
        $ scope.clickme =功能（）{\r
            $ window.alert（'第三选项卡仅功能'）;\r
        };\r
    };\r
}\r
\r
功能SpecialTab（）{\r
    返回{\r
        限制：'A'，\r
        控制器：函数（$范围）{\r
            的console.log（特殊标签CTRL，运行上的开始。'）;\r
            $ scope.hello ='你好由特殊选项卡控制器;\r
        }\r
    }\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/angular.js/1.4.3/angular.js\"></script>\r
＆LT;链接HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.js\"></script>\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.js\"></script>\r
＆LT; D​​IV NG-应用=demoAppNG控制器=TabsDemoCtrl＆GT;\r
    ＆LT; P＆GT;通过设置为true活性结合选择一个选项卡：LT; / P＆GT;\r
    ＆所述p为H.;\r
        ＆LT;按钮类=BTN BTN-默认BTN-SMNG点击=标签[0] =。主动真正的＆GT;选择第二个选项卡＆LT; /按钮＆GT;\r
        ＆LT;按钮类=BTN BTN-默认BTN-SMNG点击=标签[1]。主动=真正的＆GT;选择第三个选项卡＆LT; /按钮＆GT;\r
    ＆所述; / P＆GT;\r
    ＆所述p为H.;\r
        ＆LT;按钮类=BTN BTN-默认BTN-SMNG点击=！标签[1] .disabled =标签[1] .disabled＆GT;启用/禁用第三个选项卡＆LT; /按钮＆GT;\r
    ＆所述; / P＆GT;\r
    ＆LT;小时/＆GT;\r
    ＆LT;＆标签集GT;\r
        ＆LT;标签标题=静态标题＆GT;静态内容＆LT; /标签＆gt;\r
        ＆LT;标签标题=静态标题2sepecial标签=＆GT;静态内容2 {{你好}}＆LT; /标签＆gt;\r
        ＆LT;标签标题=静态标题3选择=thirdTabCallback（）＆GT;静态content3 {{测试}}\r
            ＆LT;按钮NG点击=clickme（）＆gt;点击ME＆LT; /按钮＆GT;\r
        ＆LT; /标签＆gt;\r
        ＆LT;标签NG重复=标题=标签中的标签，{{tab.tit​​le}}主动=tab.active禁用=tab.disabled＆GT; {{tab.content}}＆LT; /标签＆gt ;\r
        ＆LT;选项卡中选择=alertMe（）＆GT;\r
            ＆LT;制表标题＆GT; ＆LT; I类=glyphicon glyphicon铃＆GT;＆LT; / I＆GT;警报＆LT;！/制表标题＆GT;我有一个HTML的标题，以及选择回调。 pretty阴凉LT;！/标签＆gt;\r
    ＆LT; /标签集＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I have three tabs in my page. I'm using tabset and tab according to Angular Bootstrap Docs.

I set a controller for the <div> which has the tabsetas

<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>

The corresponding page is

But, when I try to add another controller for my 2nd tab as

<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>

I now find that the heading is not displayed and I can no longer click the Tab2.

Why is that? How to get back the same functionality?

Is this the right way to add another controller in an existing controller?

My app.js :

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

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

});


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

});

解决方案

I think there are at least three ways you could organize your controller code:

1. Everything in one TabController
2. Custom directive for each tab
3. Add your tab logic to the tab callback function.

Please have a look at the demo below or here at jsfiddle.

It's the ui-bootstrap example code with the above mentioned points added.

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>

这篇关于AngularJS控制器选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！