Angular: Directive Scope True

by Roman

HTML

<div ng-app="zippyModule">
  <div ng-controller="Ctrl3">
    Title: <input ng-model="title"> <br>
    Text: <textarea ng-model="text"></textarea>
    <hr>
    <div class="zippy" zippy-title="Details: {{title}}...">{{text}}</div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<style>
.zippy {
  border: 1px solid black;
  display: inline-block;
  width: 250px;
}
.zippy.opened > .title:before { content: '▼ '; }
.zippy.opened > .body { display: block; }
.zippy.closed > .title:before { content: '► '; }
.zippy.closed > .body { display: none; }
.zippy > .title {
  background-color: black;
  color: white;
  padding: .1em .3em;
  cursor: pointer;
}
.zippy > .body {
  padding: .1em .3em;
}

JavaScript

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

add.controller('Ctrl3',function($scope){
    $scope.title = 'Lorem Ipsum';
    $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
});

add.directive('zippy', function(){
    return {
      restrict: 'C',
      // Этот HTML заменит директиву zippy.
      replace: true,
      transclude: true,
      scope: { title:'@zippyTitle' },
      template: '<div>' +
                  '<div class="title">{{title}}</div>' +
                  '<div class="body" ng-transclude></div>' +
                '</div>',
      // Связующая функция добавит поведение к шаблону
      link: function(scope, element, attrs) {
            // Элемент заголовка
        var title = angular.element(element.children()[0]),
            // Состояние Opened / closed
            opened = true;
 
        // Клик по заголовку должен открыть/закрыть zippy
        title.bind('click', toggle);
 
        // Переключение состояния closed/opened
        function toggle() {
          opened = !opened;
          element.removeClass(opened ? 'closed' : 'opened');
          element.addClass(opened ? 'opened' : 'closed');
        }
 
        // инициализация zippy
        toggle();
      }
    }
  });