ng:directive - scope =

read attribute from replaced element

by Krzysztof Safjanowski

HTML

<div ng-app="accordionApp">
    <div ng-controller="accordion">
        <accordion accordion-title="title">Lorem ipsum dolor sit amet!</accordion>
    </div>
</div>

JavaScript

angular.module('accordionApp', []).
controller('accordion', function ($scope) {
    $scope.title = 'lorem ipsum dolor sit amet';
}).
directive('accordion', function () {
    return {
        link: function (scope, element) {
            scope.open = false;
            angular.element(element.children()[0]).bind('click', function () {
                scope.$apply('open = !open');
            });
        },
        restrict: 'E',
        scope: {
            foo: '=accordionTitle'
        },
        replace: true,
        transclude: true,
        template: '<div class="accordion"><h3>{{ foo }}</h3><div ng-transclude ng-show="open"></div></div>'

    };
});