Angular: Transclude Experiment

http://angularjs.org/

by mmansion

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<script type="text/ng-template" id="MyWidget.html">
    <div>
        <div ng-transclude="1"></div>
        <div ng-transclude="2"></div>
    </div>    
</script>

<div ng-controller="MyParent">
    <my-widget>
        <div ng-transclude="1">Insert into placeholder 1</div>
        <div ng-transclude="2">Insert into placeholder 2</div>
    </my-widget>
</div>

JavaScript

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

myApp.directive('myWidget', function(){
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        transclude: true,
        scope: {
            test: '@'
        },
        templateUrl: 'MyWidget.html',
        controller: 'MyWidget'
    }
});
        
function MyWidget( $scope )
{
}

function MyParent( $scope )
{
    $scope.hello = 'well ok';
}