Angular Multiple Transclusion / Улучшение / Плагины Bootstrap

Версия: v1.6.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 5.3 Kb

Уникальный ID: 2147

Посмотрели: 1245 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 24 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/mcasimir/angular-multiple-transclusion

Информация: Пользователям

Информация: Правообладателям

Теги: angularjs, Plugin, Angular, Bootstrap, ng-transclude

Поделился: BootstrapТема

Добавлено: 2017-05-31 в 11:05

Метка: 1588858937

⇄ ⇅

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
 <title>Angular Multiple Transclusion | BootstrapTema</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/ams/angular-multiple-transclusion.min.js"></script>
 <script>
var app = angular.module('myApp', ['angular-multiple-transclusion']);
app.directive('myPanel', function(){
 return {
 restrict: 'E',
 transclude: true,
 scope: true,
 template:
 `<div class="panel panel-default">
 <div class="panel-heading" ng-transclude transclude-from="header">
 </div>
 <div class="panel-body" ng-transclude transclude-from="content">
 </div>
 <div class="panel-footer text-center" ng-transclude transclude-from="footer">
 </div>
 </div>
 `
 };
});
 </script>
</head>
<body>

<my-panel>
 <div transclude-to="header">{{title}}</div>
 <div transclude-to="content"><img src="https://bootstraptema.ru/logo.png" class="img-responsive" alt="Logo BootstrapTema" /></div>
 <div transclude-to="footer"><a href="https://bootstraptema.ru/" target="_blank">BootstrapTema</a></div>
 </my-panel>

</main>

</div></div>

</body>
</html>

BootstrapTema

Angular Multiple Transclusion

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0