Реализация фабрики angularJs или службы для вкладок начальной загрузки

Как написать сервис или фабрику для загрузочных вкладок, используя angularJs. Я поместил в один контроллер, но нужна общая функция (повторный код) для разных контроллеров.

<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;
    };
Источник

3 ответа

Решение

Привет, я пишу это, используя любой сервис или фабрику, см. Пример

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

Динамически меняйте его через контроллер, смотрите рабочий пример здесь

Источник

Управление вкладками является проблемой просмотра. Вместо того, чтобы внедрять фабрику, я рекомендую создать две директивы: tabContainer а также tab, tab Директива регистрирует себя с родителем tabContainer с использованием require атрибут для доступа к API контроллера родительской директивы.

демонстрация

использование

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

Родительская директива

Директива parent публикует следующий 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 может получить доступ к родительскому контроллеру, потребовав родительскую директиву в ее определении директивы и получив доступ к контроллеру родительской директивы в качестве 4-го аргумента функции ссылки директивы tab:

определение директивы табуляции

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 для привязки вкладок.

демонстрация

контроллер

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>
Источник

Структура для контроллеров / сервисов в 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 
   }
});
Источник
Другие вопросы по тегам