Задать вопрос
Groove
@Groove
angular.js

Как можно в шаблоне компонента узнать — было ли чего передано через transclude чтобы скрыть или вывести какие то элементы?

Angular 1.*

Например в блок бокс если передан контент, чтобы в шапке появилась кнопка для сворачивания/разворачивания контента

В шаблоне компонента:
<div>
    <div class="header">
    <div ng-if="{{%ctrl.isTransclude}}"><i class="fa fa-arrow-plus"></i></div>
        {{$ctrl.model.header}}
    </div>
    <div class="body" ng-transclude></div>
</div>


1) Если в шаблоне страницы (с контентом):
<block model="model">
    content
</block>


то в результате получаем
<div>
    <div class="header">
        <div><i class="fa fa-arrow-plus"></i></div>
        {{$ctrl.model.header}}
    </div>
    <div class="body">
        content
    </div>
</div>


2) Если в шаблоне страницы (без контента):
<block model="model">
</block>


то в результате получаем
<div>
    <div class="header">
        {{$ctrl.model.header}}
    </div>
</div>
  • Вопрос задан
  • 154 просмотра
1 комментарий
Подписаться 1 Оценить 1 комментарий
Решения вопроса 1
archerz
@archerz
Можно попробовать сделать через слоты:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Angular Test</title>
</head>
<body ng-controller="BodyCtrl as vm">
<div test-widget>
  <test-widget-title>Hello!</test-widget-title>
  <test-widget-body>Widget 1</test-widget-body>
</div>
<div test-widget>
  <test-widget-body>Widget 2</test-widget-body>
</div>
<script src="https://unpkg.com/angular@1.6.4/angular.js"></script>
<script type="text/javascript">
angular
  .module('app', [])
  .controller('BodyCtrl', function() {})
  .directive('testWidget', function() {
    return {
      restrict: 'A',
      scope: {},
      transclude: {
        'title': '?testWidgetTitle',
        'body': 'testWidgetBody'
      },
      template: '' +
        '<div>BEGIN</div>' +
        '<div ng-if="vm.hasTitle">' +
        '  TITLE: <b ng-transclude="title"></b>' +
        '</div>' +
        '<div ng-transclude="body"></div>' +
        '<div>END</div>' +
        '<p></p>',
      controllerAs: 'vm',
      controller: function($transclude) {
        var vm = this;
        vm.hasTitle = $transclude.isSlotFilled('title');
      },
      link: function(scope, elem, attrs, ctrl, $transclude) {
        //var vm = scope.vm = {};
        //vm.hasTitle = $transclude.isSlotFilled('title');
      }
    };
  });
</script>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Angular frontend developer middle+
IT Force • Краснодар
от 200 000 ₽
Senior .NET Core developer
Spatium Software • Каир
от 250 000 до 300 000 ₽
Kotlin Backend-разработчик
vivaCRM • Москва
от 200 000 до 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Очень срочно нужно помочь запустить программу с UI
26 апр. 2024, в 00:13
1000 руб./за проект
Создание бота/скрипта для сайта забронирование мест
26 апр. 2024, в 00:10
30000 руб./за проект
Ещё заказы