Angularjs - Zippy pattern

by Galo Aragoneses

HTML

<script src="https://code.angularjs.org/1.2.9/angular.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div ng-app="myApp">
    title: <input type="text" ng-model="model.title" /><br />
    content: <input type="text" ng-model="model.content" />
    <zippy title="{{model.title}}">this is the content: {{model.content}} </zippy>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('zippy', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            title: "@"
        },
        template: '<div><h3 ng-click="show()">{{title}}</h3><h4 ng-show="isShowed" ng-transclude></h4></div>',
        link: function ($scope) {
            $scope.isShowed = false;
            $scope.show = function () {
                $scope.isShowed = !$scope.isShowed;
            }
        }
    };
});