Question

如何使用angularJs为bootstrap选项卡编写服务或工厂。我放在一个控制器中但需要一个用于不同控制器的通用功能（重复代码）。

<ul class="nav nav-tabs">
    <li data-ng-class="{active:tab===0}">
        <a href ng-click="changeTab(0)"> <i class="fa fa-list"></i></a>
    </li>
    <li data-ng-class="{active:tab===1}">
        <a href ng-click="changeTab(1)"><i class="fa fa-user"></i></a>
    </li>
</ul>

<div data-ng-class="{activeTab:tab===0}" ng-show="isActiveTab(0)">
  tab1
</div>
<div data-ng-class="{activeTab:tab===1}" ng-show="isActiveTab(1)">
  tab2
</div>

的控制器

$scope.tab = 0;    
    $scope.changeTab = function(newTab){
      $scope.tab = newTab;
    };    
    $scope.isActiveTab = function(tab){
      return $scope.tab === tab;
    };

Answer 1

管理标签是一个视图问题。我建议创建两个指令：tabContainer和tab，而不是实现工厂。 tab指令使用tabContainer属性向父require注册，以访问父指令的控制器API。

Demo

用法

<tab-container selected="tab2">
   <tab name="tab1">tab1</tab>
   <tab name="tab2">tab2</tab>
</tab-container>

家长指令

父指令发布子选项卡指令将访问的以下控制器API：

tabContainer控制器

// registers this tab with the parent tabContainer
this.register = function(element) {
  $scope.tabs.push(element);
}
// returns the selected tab object whose 
// name property indicates which tab is active
this.getSelected = function() {
  return $scope.selectedTab;
}

儿童指令

tab指令能够通过在其指令定义中要求父指令，并访问父指令的控制器作为tab指令的链接函数的第4个参数来访问父控制器：

制表符指令定义

scope: true,
require: '^tabContainer',
link: function(scope, element, attr, tabContainer) {
  // set the tab so that it is visible in the tab directive's scope.
  scope.tab = { name: attr.name, element:element};
  scope.selectedTab = tabContainer.getSelected();
  tabContainer.register(scope.tab);

}

范围设置为true，以便每个选项卡都会创建自己的子范围，而不会干扰其他选项卡的范围。

模板文件

例如，指令模板嵌入在HTML中：

<script type="text/ng-template" id="tabContainer.html">
  <ul class="nav nav-tabs">
    <li ng-repeat="tab in tabs" data-ng-class="{active:selectedTab.name===tab.name}">
      <a href ng-click="changeTab(tab)"> <i class="fa fa-list">{{tab.name}}</i></a>
    </li>
  </ul>
  <ng-transclude></ng-transclude>
</script>
<script type="text/ng-template" id="tab.html">
 <div data-ng-class="{activeTab:selectedTab.name===tab.name}" ng-show="selectedTab.name === tab.name">
     <ng-transclude></ng-transclude>
 </div>
</script>

建议将这些文件移到专用的HTML文件中。

更改活动选项卡

用户可以通过单击选项卡链接来更改活动选项卡。这是通过在父控制器中发布$scope函数来实现的：

$scope.changeTab = function(tab) {
  $scope.selectedTab.name = tab.name;
}

创建标签模块

AngularJS及其可插拔模块化架构的优点在于您可以扩展AngularJS指令生态系统，并使指令无缝协同工作。例如，您可以将上面的tabs指令封装到tabs模块中，甚至可以使用ngRepeat指令绑定选项卡。

Demo

控制器

var app = angular.module('app',['tabs']);
app.controller('ctrl', function($scope) {
   $scope.tabData = [ 
      { name: 'tab1', body: 'You selected tab1!'},
      { name: 'tab2', body: 'You selected tab2!'},
      { name: 'tab3', body: 'You selected tab3!'},
      { name: 'tab4', body: 'You selected tab4!'},
    ];
});

视图

<div class="container" ng-controller="ctrl">
   <tab-container selected="tab1">
     <tab ng-repeat="tab in tabData" name="{{tab.name}}">{{ tab.body }} </tab>
  </tab-container>
</div>

Answer 2

您好，我使用任何服务或工厂写出来见例子

<ul ng-init="tab = 1">          
    <li ng-class="{active:tab===1}"> 
      <a href ng-click="tab = 1">Tab1</a>               
    </li>           
    <li ng-class="{active:tab===2}"> 
       <a href ng-click="tab = 2">Tab2</a>              
    </li>           
    <li ng-class="{active:tab===3}"> 
      <a href ng-click="tab = 3">Tab3</a>           
    </li>           
    <br><br> 
    <p ng-show="tab === 1"> Tab1 content </p>           
    <p ng-show="tab === 2"> Tab2 content</p> 
    <p ng-show="tab === 3"> Tab3 content</p>        
</ul>

通过控制器动态更改它，请参阅工作示例here

Answer 3

Angular中控制器/服务的结构在这里解释得很好： https://github.com/johnpapa/angular-styleguide

在app.js中，我们声明一个角度应用程序，给它一个名字，以及任何依赖项（ng-route / ng-grid）。 $ http调用应使用工厂或服务进行，控制器应调用服务来获取或发布数据。从角度文档中，“服务是使用依赖注入（DI）连接在一起的可替换对象。您可以使用服务在整个应用程序中组织和共享代码。” https://docs.angularjs.org/guide/services

app.js：

var app = angular.module('appname', []);

app.factory('httpResponseErrorInterceptor'...
app.config(['$httpProvider',...

控制器：

    angular.module('appname').controller("NameCtrl", ["$scope", "$log", "$window", "$http", "$timeout", "SomeService",
    function ($scope, $log, $window, $http, $timeout, TabService) {

    //your controller code
       $scope.tab = 0;    
       $scope.changeTab = function(newTab){
          $scope.tab = newTab;
       };    
       $scope.isActiveTab = function(tab){
          return $scope.tab === tab;
       }; 
    }
]);

服务：

angular.module('appname').service("TabService", function () {
   //Your code for shared functionality regarding tab service

   var currentTab = {};

   return {
      currentTab : currentTab 
   }
});

为bootstrap选项卡实现angularJs工厂或服务