Skip to content

Instantly share code, notes, and snippets.

@kalbarczyk

kalbarczyk/ng-transclude.html

Created October 29, 2014 12:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalbarczyk/04df02c21036a927eb32 to your computer and use it in GitHub Desktop.
Save kalbarczyk/04df02c21036a927eb32 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS - dyrektywa ngTransclude - przykład z naszej książki „AngularJS - Pierwsze kroki”, która ukaże się na początku 2015r. dzięki wydawnictwu Helion.
Raw
ng-transclude.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>AngularJS - ngTransclude</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body data-ng-controller="defaultCtrl">
<div class="container">
<div data-test-transclude-false="" class="panel panel-default">
<div class="panel-body">{{testData}}</div>
</div>
<div data-test-transclude-true="" class="panel panel-default">
<div class="panel-body">{{testData}}</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('defaultCtrl', function ($scope) {
$scope.testData = 'Jakiś tekst';
});
app.directive('testTranscludeFalse', function () {
return {
restrict: 'A',
template: '<div><span>Ten tekst zostanie zamieniony</span><div> Ten tekst nie zostanie zmieniony </div></div>',
transclude: false,
link: function (scope, element, attrs, ctrl, transclude) {
element.find('span').replaceWith(transclude());
}
};
});
app.directive('testTranscludeTrue', function () {
return {
restrict: 'A',
template: '<div><span>Ten tekst zostanie zamieniony</span><div> Ten tekst nie zostanie zmieniony </div></div>',
transclude: true,
link: function (scope, element, attrs, ctrl, transclude) {
element.find('span').replaceWith(transclude());
}
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment