aLight: $ns example

Angular Light: Namespace example

by lega911

HTML

<script src="http://angularlight.org/bin/alight.last.min.js"></script>
<div al-app="first">
    {{scopeName}} +
    <span my-directive></span>
</div>
<div al-app="second">
    {{scopeName}} +
    <span my-directive></span>

    <!-- inside of second scope with $ns -->
    <div al-controller="first">
        {{scopeName}} +
        <span my-directive></span>        
    </div>
</div>

CSS

div { border: 1px solid black; padding: 3px; margin: 3px; }

JavaScript

alight.directives.my = {};
alight.directives.my.directive = function(el) {
    el.innerText = 'Global directive';
};

alight.controllers.first = function(scope) {
    scope.scopeName = 'First scope';
};

alight.controllers.second = function(scope) {
    scope.scopeName = 'Second scope';
    
    // make a namespace
    scope.$ns = {directives: {my: {}}};
    
    // make a local directive
    scope.$ns.directives.my.directive = function(el) {
        el.innerText = 'Local directive';
    };
    
    // forward global controllers and directives to the namespace
    scope.$ns.controllers = alight.controllers;
    scope.$ns.directives.al = alight.directives.al;
};