zachsnow / ng-multi-transclude

ng-multi-transclude
MIT License
79 stars 19 forks source link

Have templates in seperate files #27

Closed youpiwaza closed 9 years ago

youpiwaza commented 9 years ago

Hi there !

I don't really get the point to have all templates in < script> tags. I'd prefer to have them in separate .html files, like we usually do in angular, but it doesnt seems to work :/

Is it possible to use a more convenient way to include multiple transclusion ? I'd like to have a templateUrl that leads to an html file with all the structure.

I'll continue to do some tests, I might ave done something wrong ^^'

Cheers, and very nice work

Edit : Never mind, I just needed the 'ng-multi-transclude-controller' attribute in my template, on the parent tag. Awesome work ;)

Just in case here's the syntax :

// In module declaration
.directive('ngMultiButton2', [
    function(){
        return {
            templateUrl: 'assets/elements/tests/multitransclude.html',
            transclude: true
        };
    }
])

// External template
<button ng-multi-transclude-controller>
    <div>Top content</div>
    <div ng-multi-transclude="title">Default transclude 1</div>
    <div>Middle content</div>
    <div ng-multi-transclude="hint">Default transclude 2</div>
    <div>Bot content</div>
    <div ng-multi-transclude="wtv">Default transclude 3</div>
</button>

// Call in module template
<div ng-multi-button2>
    <span name="title" ng-log="multi title">
        My 1st transclude
    </span>
    <span name="hint" ng-log="multi hint">
        My 2nd transclude
    </span>
</div>

Outputs

<button ng-multi-transclude-controller>
    <div>Top content</div>
    <span name="title" ng-log="multi title">My 1st transclude</span>
    <div>Middle content</div>
    <span name="hint" ng-log="multi hint">My 2nd transclude</span>
    <div>Bot content</div>
    <div ng-multi-transclude="wtv">Default transclude 3</div>
</button>
zachsnow commented 9 years ago

Great, glad you've got it sorted!