zhentian-wan/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as main">
<ng-details>
    <detail-title message="main.detail.title"></detail-title>
    <detail-content-text message="main.detail.text"></detail-content-text>
    <detail-content-image message="main.detail.image"></detail-content-image>
</ng-details>
</body>
</html>

## script.js
var app = angular.module('app', []);

app.controller('AppCtrl', function() {
    this.detail = {
        title: "Detail title",
        text: "Text Content",
        image: "Image Content"
    };
});

app.component('detailContentImage', {
    bindings: {
        message: '<' // one way binding
    },
    controller: function () {
    },
    controllerAs: 'vm',
    template: '<h2>{{vm.message}}</h2>'
});

app.component('detailContentText', {
    bindings: {
        message: '<'
    },
    controller: function () {
    },
    controllerAs: 'vm',
    template: '<h3>{{vm.message}}</h3>'
});

app.component('detailTitle', {
    bindings: {
        message: '<'
    },
    controller: function () {
    },
    controllerAs: 'vm',
    template: '<span>{{vm.message}}</span>'
});

app.component('ngDetails', {
    bindings: {data: '<'},
    transclude: {
        'title': 'detailTitle',
        'textContent': 'detailContentText',
        'imageContent': 'detailContentImage'
    },
    controller: function () {
        this.toggle = true;
        this.toggleIt = function () {
            this.toggle = !this.toggle;
        }
    },
    controllerAs: 'vm',
    template: [
        '<div class="details">',
        '<div class="summary" ng-click="open = !open">',
        '{{ open ? \'&blacktriangledown;\' : \'&blacktriangleright;\' }}',
        '<span ng-transclude="title">default title</span>',
        '</div>',
        '<div class="content" ng-if="vm.toggle" ng-show="open" ng-transclude="textContent">default text</div>',
        '<div class="content" ng-if="!vm.toggle" ng-show="open" ng-transclude="imageContent">default image</div>',
        '</div>',
        '<button ng-click="vm.toggleIt()">Toggle it: {{vm.toggle}}</button>'
    ].join('')
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
	<script src="script.js"></script>
	</head>
	<body ng-app="app" ng-controller="AppCtrl as main">
	<ng-details>
	<detail-title message="main.detail.title"></detail-title>
	<detail-content-text message="main.detail.text"></detail-content-text>
	<detail-content-image message="main.detail.image"></detail-content-image>
	</ng-details>
	</body>
	</html>
	var app = angular.module('app', []);

	app.controller('AppCtrl', function() {
	this.detail = {
	title: "Detail title",
	text: "Text Content",
	image: "Image Content"
	};
	});

	app.component('detailContentImage', {
	bindings: {
	message: '<' // one way binding
	},
	controller: function () {
	},
	controllerAs: 'vm',
	template: '<h2>{{vm.message}}</h2>'
	});

	app.component('detailContentText', {
	bindings: {
	message: '<'
	},
	controller: function () {
	},
	controllerAs: 'vm',
	template: '<h3>{{vm.message}}</h3>'
	});

	app.component('detailTitle', {
	bindings: {
	message: '<'
	},
	controller: function () {
	},
	controllerAs: 'vm',
	template: '<span>{{vm.message}}</span>'
	});

	app.component('ngDetails', {
	bindings: {data: '<'},
	transclude: {
	'title': 'detailTitle',
	'textContent': 'detailContentText',
	'imageContent': 'detailContentImage'
	},
	controller: function () {
	this.toggle = true;
	this.toggleIt = function () {
	this.toggle = !this.toggle;
	}
	},
	controllerAs: 'vm',
	template: [
	'<div class="details">',
	'<div class="summary" ng-click="open = !open">',
	'{{ open ? \'&blacktriangledown;\' : \'&blacktriangleright;\' }}',
	'<span ng-transclude="title">default title</span>',
	'</div>',
	'<div class="content" ng-if="vm.toggle" ng-show="open" ng-transclude="textContent">default text</div>',
	'<div class="content" ng-if="!vm.toggle" ng-show="open" ng-transclude="imageContent">default image</div>',
	'</div>',
	'<button ng-click="vm.toggleIt()">Toggle it: {{vm.toggle}}</button>'
	].join('')
	});