Дополнительный слот ng-transclude с отступом и переключением ng-if для включения - PullRequest
Новая
       77

Дополнительный слот ng-transclude с отступом и переключением ng-if для включения

0 голосов
/ 30 октября 2019

Я пытаюсь позволить дополнительному слоту tranclude «content» иметь запасной вариант, который показывает, когда кнопка переключается (ng-if меняется на false). Но единственный способ, которым будет отображаться резервный контент, - это когда блок, заполняющий слот включения, исключается из разметки (см. Отсутствующий блок, который иллюстрирует это).

Почему не происходит откат для дополнительного слота контента '«content», отображать, как и ожидалось, когда ng-if предположительно должен удалить блок и вызвать откат для показа?

Какие у меня есть варианты? 

<outer>
  <content ng-if="!useFallback">My content</content>
</outer>

//the component:
transclude: {
  'content': '?content'
}

//the component template
<div ng-transclude="content">Fallback not toggled!!</div>

Что япопытаться сделать изначально, это иметь внешний компонент с необязательным включением и внутренний компонент с необязательным включением, где внешний компонент имеет шаблон с ng-transclude = "content", переданным внутреннему компоненту, только если он переданпотребитель внешних компонентов. 

angular.module('namespace', []);

(function () {
    
    angular.module('namespace').component('outer', {
      transclude: {
        'header': '?header',
        'content': '?content',
        'footer': '?footer'
      },
      template: 
      `
      <div class="status">
      header slot: {{$ctrl.isSlotFilled('header')}} - 
      content slot: {{$ctrl.isSlotFilled('content')}} - 
      footer slot: {{$ctrl.isSlotFilled('footer')}}
      </div>

      <div ng-transclude="header">Fallback header</div>
      <div ng-transclude="content">Fallback not toggled!!</div>
      <div class="static-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      <div ng-transclude="footer"></div>
      `, 
      controller: ['$scope', '$transclude', function($scope, $transclude) {
        
        var $ctrl = $scope.$ctrl;
      
        $ctrl.isSlotFilled = function(slotName){
          return $transclude.isSlotFilled(slotName);
        };
                     
      }]
    });
  
})();

(function () {
  angular.module('namespace').controller('aController', ['$scope', function($scope){ }]);
})();

(function(){
  angular.element(document).ready(function () {
    var htmlElement = document.querySelector('html');
    htmlElement.setAttribute('ng-controller', 'aController as vm');
    angular.bootstrap(document, ['namespace']);
  });
})();
outer{
  display: block;
}

.status {
    padding: .5rem;
    background: #ff4b4b;
    border: 1px solid red;
    color: white;
    border-radius: 3px;
    margin: 1rem 0;
    display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<button ng-click="useFallback = !useFallback">Toggle fallback content</button>
<outer>
  <content ng-if="!useFallback">My content</content>
  <footer>My Footer</footer>
</outer>
...