Directives Element

Custom HTML Elements using Angular-Directives

by Mayank Dixit

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<country>
    <state>
        <city></city>
    </state>
</country>

JavaScript

angular.module('myApp', []).
directive('country', function(){
    return {
        restrict: 'E',
        controller: function(){
            this.makeAnn = function(msg){
                console.log('Country says: '+msg);
            }
        }
    }
}).
directive('state', function(){
    return {
        restrict: 'E',
        controller: function(){
            this.makeLaw = function(msg){
                console.log('State says: '+msg);            
            }
        }
    }
}).
directive('city', function(){
    return {
        restrict: 'E',
        require: ["^country", "^state"],
        link: function(scope, elem, attr, ctrls){
            ctrls[0].makeAnn('"I anounce this City to be great"');
            ctrls[1].makeLaw('"I make this law for the city"');
        }
    }
})