chapter6/expander-string.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app='expanderModule'>
<head>
  <title>Expander</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
  <link href="expander.css" rel='stylesheet'>
</head>
<body ng-controller='SomeController' >
  <expander class='expander' expander-title='{{title}}'>
    {{text}}
  </expander>
  <expander class='expander' expander-title='I am clickable'>
    {{text}}
  </expander>
</body>

<script>
  function SomeController($scope) {
    $scope.title = 'Click me to expand';
    $scope.text = 'Hi there folks, I am the content that was hidden but is now shown.';
  }

angular.module('expanderModule', [])
  .directive('expander', function(){
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      scope: { title:'@expanderTitle' },
      template: '<div>' +
          '<div class="title" ng-click="toggle()">{{title}}</div>' +
          '<div class="body" ng-show="showMe" ng-transclude></div>' +
          '</div>',
      link: function(scope, element, attrs) {
        scope.showMe = false;

        scope.toggle = function toggle() {
          scope.showMe = !scope.showMe;
        }
      }
    }
  });
</script>
</html>