How to force directive to work only if it is within a specific policy?

Navigation
6

I'm trying to make the ngPanelHead, ngPanelBody, and ngPanelFoot directives require to be within the ngPanel directive, otherwise an error will appear on the console. I tried with require but it is not working. I'm using version 1.4.8 of AngularJS. 

angular
  .module('app')
  .directive('ngPanel', panel)
  .directive('ngPanelHead', panelHead)
  .directive('ngPanelBody', panelBody)
  .directive('ngPanelFoot', panelFoot);

function panel() {
  var directive = {
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<section class="o-panel" ng-transclude></section>'
  }

  return directive;
}

function panelHead() {
  var directive = {
    restrict: 'EA',
    // require: '^ngPanel',
    replace: true,
    transclude: true,
    template: '<header class="o-panel__head" ng-transclude></header>'
  }

  return directive;
}

function panelBody() {
  var directive = {
    restrict: 'EA',
    // require: '^ngPanel',
    replace: true,
    transclude: true,
    template: '<article class="o-panel__body" ng-transclude></article>'
  }

  return directive;
}

function panelFoot() {
  var directive = {
    restrict: 'EA',
    // require: '^ngPanel',
    replace: true,
    transclude: true,
    template: '<footer class="o-panel__foot" ng-transclude></footer>'
  }

  return directive;
}

Thank you!

    
asked by anonymous 02.12.2015 / 14:36

1 answer

2

The require parameter is the correct way to describe dependency requirements in setting Directive . 

.directive('subDiretiva', function() {
    return {
        scope: { data: "=" },
        require: ['?^^diretivaPai1', '?^^diretivaPai2'],  // Lista de possíveis diretivas-pai
        template: '<button></button>'
        link: function(scope, elem, attrs, diretivaParenteCtrl) {
              //conteúdo do link aqui            
              };
        },
    }
})
    
02.12.2015 / 15:15
Problems Xamarin method Asynchronous Add class to a DataTable