web-dev-qa-db-ja.com

タブのAngularJSコントローラー

ページに3つのタブがあります。 Angular Bootstrap Docs に従って、tabsetとtabを使用しています。

tabsetasを持つ<div>のコントローラーを設定しました

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

対応するページは enter image description here

しかし、2番目のタブに別のコントローラーを追加しようとすると、

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

enter image description here

見出しが表示されず、Tab2をクリックできなくなった。

何故ですか？同じ機能を取り戻すにはどうすればよいですか？

これは、既存のコントローラーに別のコントローラーを追加する正しい方法ですか？

私app.js：

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

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

});


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

});
javascriptangularjstwitter-bootstraptabsng-controller
7
Nikhil

コントローラーコードを整理するには、少なくとも3つの方法があると思います。

  1. 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>
5
AWolf

ここでは、タブで使用するカスタムディレクティブを示します。そのため、各タブにカスタムコントローラーを使用できます。

angular.module('myModule', ['ui.bootstrap'])
  .directive('tabController', function() {
    return {
      restrict: 'A',
      controller: '@',
      name: 'tabController',
    }
  })
  .controller('MyCustomController', function() {
    var vm = this;
    vm.title = "Hey, I am The first controller";
  })
  .controller('MyCustomController2', function() {
    var vm = this;
    vm.title = "Hey, I am the second controller!";
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<html>

<div ng-app="myModule">


  <uib-tabset type="tabs">
    <uib-tab tab-controller="MyCustomController as ctrl">
      <uib-tab-heading>
        <span ng-bind="ctrl.title"></span>
      </uib-tab-heading>
      <p ng-bind="ctrl.title"></p>
    </uib-tab>
    <uib-tab tab-controller="MyCustomController2 as ctrl2">
      <uib-tab-heading>
        <span ng-bind="ctrl2.title"></span>
      </uib-tab-heading>
      <p ng-bind="ctrl2.title"></p>
    </uib-tab>

  </uib-tabset>

</div>
2
user3435330