angular-composite-component

AngularJS Composite Component (Directive). This is also an example of having multiple transcluding directives ($transclude) on a component.

Live Demo http://nickholub.github.io/angular-composite-component

Directive source code

Directive example usage

<div cs-composite>
    <div cs-section="header">
        Composite Component Header
    </div>
    <div cs-widget cs-name="first widget">
        <div class="alert alert-success">
            Random Value: {{randomValue}}
        </div>
    </div>
    <div cs-widget cs-name="second widget">
        <div class="alert alert-info">
            Percentage: {{percentage}}%
        </div>
    </div>
    <div cs-widget cs-name="third widget">
        <div progressbar class="progress-striped active" type="info" value="percentage">
            {{percentage}}%
        </div>
    </div>
    <div cs-section="footer">
        Composite Component Footer
        <div>Random Value: {{randomValue}}</div>
        <div>Percentage: {{percentage}}%</div>
    </div>
</div>

Running Application

Install Node.js dependencies:

   $ npm install

Install Bower dependencies:

   $ bower install

Launch Node.js server with Grunt:

   $ grunt serve

Application will be available at http://localhost:9000

Links

ngTransclude AngularJS transclude directive

Creating Custom Directives AngularJS custom directives developer guide

AngularJS Issue #4357 AngularJS issue (open) for having multiple transcluding directives on an element

AngularJS JavaScript framework

Node.js Software platform built on JavaScript runtime

Bower Package manager for the web

Grunt JavaScript Task Runner

Bootstrap HTML/CSS/JavaScript Front-End framework

UI Bootstrap AngularJS directives for Bootstrap