angularjs-directive-require

by jeklund

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/jquery@latest/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/lodash@latest/lodash.min.js"></script>
<script src="https://unpkg.com/angular@latest/angular.min.js"></script>
<div id="app">
  <tabs>
    <pane title="Localization">
      <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
      <span>Currency: {{ 123456 | currency }}</span><br>
      <span>Number: {{ 98765.4321 | number }}</span><br>
    </pane>
    <pane title="Pluralization">
      <div ng-controller="BeerCounter">
        <div ng-repeat="beerCount in beers">
          <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
        </div>
      </div>
    </pane>
  </tabs>
</div>

JavaScript

angular.module('app', [])
  .controller('BeerCounter', function ($scope, $locale) {
    $scope.beers = [0, 1, 2, 3, 4, 5, 6];

    if ($locale.id === 'en-us') {
      $scope.beerForms = {
        0: 'no beers',
        one: '{} beer',
        other: '{} beers'
      };
    } else {
      $scope.beerForms = {
        0: 'žiadne pivo',
        one: '{} pivo',
        few: '{} pivá',
        other: '{} pív'
      };
    }
  })
  .directive('tabs', () => ({
    restrict: 'E',
    transclude: true,
    scope: {},
    controller(
      $scope,
      $element
    ) {
      const panes = $scope.panes = [];

      $scope.select = function (pane) {
        panes.forEach(pane => { pane.selected = false; });
        pane.selected = true;
      };

      this.addPane = function (pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }

        panes.push(pane);
      };
    },
    template: `
      <div class="tabbable">
        <ul class="nav nav-tabs">
          <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
            <a href="" ng-click="select(pane)">{{pane.title}}</a>
          </li>
        </ul>
        <div class="tab-content" ng-transclude></div>
      </div>
    `,
    replace: true
  }))
  .directive('pane', () => ({
    //require: '^tabs',
    //require: ['^tabs'],
    require: { tabs: '^', ngModel: 'ngModel' },
    restrict: 'E',
    transclude: true,
    scope: { title: '@' },
    link(scope, element, attrs, controllers) {
      controllers.tabs.addPane(scope);
    },
    controller($scope) {
      const vm = this;

      vm.$onInit = () => {
        console.dir($scope);
        console.dir(vm);

        _.assign($scope, _.pick(vm, ['tabs', 'title']));

        console.dir($scope);
      };
    },
    controllerAs: 'vm',
    bindToController: true,
    template: `
      <div 
        class="tab-pane" 
        ng-class="{active: selected}" 
        ng-transclude
      >
      </div>
    `,
    replace: true
 ...