AngularJS - Transclude

by vtortola

HTML

<div ng-app="myapp">
    <div ng-controller="myController">
        <my-directive-wrapper>
            <my-directive-inner ng-repeat="item in items" />
        </my-directive-wrapper>
    </div>
</div>

CSS

a.back, a.next {
    border:1px solid #000;
    padding:2px;
}

div.list{
    display:inline-block;
    margin:5px;
}

span.item {
    border:0px solid transparent;
    border-radius: 10px;
    background-color:#000;
    color:#fff;
    padding:4px;
    margin:2px;
}

JavaScript

angular.module("myapp", [])
.controller("myController", function($scope){
    $scope.name = "Transclude test";
    $scope.items = [
        { title : "test1" },
        { title : "test2" },
        { title : "test3" }
    ];
})

.directive("myDirectiveWrapper", function(){
    return {
        restrict: 'E',
        transclude: true,
        link: function(scope, element, attrs, controller) {

        },
        template: "<div><h3>{{ name }}</h6><a class='back'>Back</a><div ng-transclude class='list'></div><a class='next'>Next</a>"
    }
})

.directive("myDirectiveInner", function(){
    return {
        restrict: 'E',
        link: function(scope, element, attrs, controller) {
           
        },
        template: "<span class='item'>{{ item.title }}</span>"
   }
})
;