1

Никак не могу решить такую задачу.

Надо создать табы с разнесенной логикой для навигации и контента (разные директивы), они друг с другом общаются с помощью events.

С директивой навигации никаких проблем нет.

Все вопросы про директиву с отображением контента. Есть директива <tabs> и внутри нее множество директив <tab> с уникальным ключом-атрибутом. Каждый <tab> может содержать другую директиву/expression/просто html. <tab> показывается только, когда ключ в её атрибуте равен переменной у родителя <tabs>. Не получается реализовать такую структуру.

  • Как передать значение переменной item.key в атрибут директивы с ng-repeat и ng-transclude? (например <tab key="{{item.key}}" repeat="item in items">)
  • Как получить доступ в директиве <tab> к переменной selectedTabKey родителя <tabs>?

var app = angular.module("app", []);
var $ = angular.element;

app.run(function($templateCache, $rootScope) {
  $rootScope.items = [ 
    {key:1,value:'a'},
    {key:2,value:'b'},
    {key:3,value:'c'}
  ];
});

app.directive( "tabs", function() {
  return {
    restrict: "AE",
    scope: true,
    transclude: true,
    replace: true,
    template: "<div ng-transclude></div>",
    link: function(scope, elem, attr, ctrl) {
      scope.selectedTabKey = 2;
      // TODO: changing the selectedTabKey value
      // want to show/hide the related tab
    }
  };
});

app.directive( "tab", function($compile) {
  return {
    restrict: "AE",
    transclude: true,
    replace: true,
    template: "<div><span transclude></span></div>",
    link: function( scope, elem, attr, ctrl, transclude ) {
      var transc = $(elem[0].querySelector( "[transclude]" ));
      transclude( scope, function( childs ) {
        transc.append( childs );
      });
      transc.attr("ng-repeat", attr.repeat);
      $compile(transc)(scope);
      // todo: access parent's var `selectedTabKey`
      // and make visible the related tab 
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

<div ng-app="app">
  <tabs>
    <!-- how to pass the attr {{item.key}} below? -->
    <tab key="{{item.key}}" repeat="item in items">
      <!-- here some directive/expression/plain html -->
      {{item.value}}
    </tab>
  </tabs>
</div>

4
  • 1
    не совсем понятна логика tab. Но тебе нужно смотреть о свойстве required
    – Grundy
    12 фев 2017 в 20:11
  • @Grundy спасибо, посмотрю внимательнее на это свойство. Логика tab больше для визуального разделения логики. В каждом табе, соответственно, будет директива. Может есть идеи сделать проще?
    – kashesandr
    13 фев 2017 в 7:16
  • 1
    По ссылке в моем комментарии стандартный пример с табами, мне кажется он намного проще получается чем у тебя
    – Grundy
    13 фев 2017 в 7:18
  • @Grundy супер, спасибо за наводки! Получилось то, что хотел plnkr.co/edit/IGrgb5GY5legl2ncrw2d?p=preview
    – kashesandr
    13 фев 2017 в 9:26

1 ответ 1

1

Нашел решение.

Используя свойство require в директиве tab со ссылкой ^^tabs, получаем доступ к контроллеру родителя.

В сниппете функциональность, какую хотел реализовать.

(function(angular) {
  'use strict';
  
angular.module('app', [])

  .run(function($rootScope){
    $rootScope.items = [
      {key: 1, label: 'label1', value:'content1'},
      {key: 2, label: 'label2', value:'content2'},
      {key: 3, label: 'label3', value:'content3'}
    ]
  })

  .directive('tabsNav', function() {
    return {
      scope: { data: '=?data', id: '@for' },
      replace: true,
      restrict: 'EA',
      controller: 'tabsNavCtrl',
      template: [
        '<div>',
          '<div ng-repeat="item in data" ng-click="click(item.key)" ng-class="{\'-active\': item.active}">',
            '{{item.label}}',
          '</div>',
        '</div>'        
      ].join('')
      
    };
  })
  .controller('tabsNavCtrl', function($scope, $rootScope) {
    if ($scope.data === null) $scope.data = [];
    $scope.click = function(key) {
      $scope.data.forEach(function(item) {
        item.active = item.key === key;
      });
      return $rootScope.$broadcast('TabsClick', {
        key: key,
        id: $scope.id
      });
    };
  })   

  .directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: { id: '@' },
      controller: ['$scope', function MyTabsController($scope) {
        var panes = $scope.panes = [];

        $scope.$on('TabsClick', function(e, data){
          var id = data.id;
          var key = data.key;
          if ($scope.id == id) $scope.select(key);
        });
      
        $scope.select = function(key){
            angular.forEach(panes, function(pane) {
              pane.selected = pane.key == key;
          });
        };

        this.addPane = function(paneScope) {
          panes.push(paneScope);
          if (panes.length === 1) 
            $scope.select(paneScope.key);
        };
      }],
      template: '<div> <div ng-transclude></div> </div>'
    };
  })
  
  .directive('tab', function() {
    return {
      require: '^^tabs',
      restrict: 'E',
      transclude: true,
      scope: { key: '@' },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template: '<div ng-show="selected"> <div ng-transclude></div> </div>'
    };
  });
})(window.angular);
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-directive-tabs-production</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="app">
  
  <tabs-nav for='id1' data="items"></tabs-nav>
  
  <tabs id="id1">
    <tab key="{{item.key}}" ng-repeat="item in items">
      {{item.value}}
    </tab>
  </tabs>
  
</body>

</html>

1
  • 1
    напиши более развернутый ответ как именно использовал require. И конечный пример можешь вставить сниппетом, так же как в вопросе
    – Grundy
    13 фев 2017 в 9:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.