Steve Senkus

Software Developer living in 🌞sunny, 🌞sunny San Diego

Valid AngularJS Directives

by Steven Senkus in  angularjs, inspiration, programming, prototyping, web development

Believe it or not, the following examples are valid AngularJS directives:

It starts off as normal as can be…

We’ll start off by creating a simple Angular module.

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

Usually, you will see Angular developers automatically placing the ng-app directive on the tag. In our case, we only want to manage what’s inside this particular

element.

<div ng-app="awesomeApp"></div>

Angular is going to have control over the DOM elements contained within this div.

<div ng-app="awesomeApp">
    <!-- DIRECTIVES -->

    <!-- comment-style directives -->
    <!-- directive: ninja ohyeah ?? ?? -->
    <!-- directive: person id=1,name=dude,age=25,job=software developer-->

    <!-- element-style -->
    <c@$# name="Steve" result="Holy shit, <ca$#> is a new element in HTML8"></c@$#>

    <!-- attribute-style -->
     <h1 m0ney$></h1>
     <!-- class-style -->
     <ul class="awesome"></ul>

</div>

<c@$# name="Steve" result="Holy shit, <ca$#> is a new element in HTML8"></c@$#>

// just a quick template with an awesome tag name
App.directive('c@$#', function () {
    return {
        restrict: 'E',
        link: function (s, e, a) {
            console.log(a);
            s.name = a.name;
            s.result = a.result;
        },
        template: '<h1>{{name}}</h1> <h2>{{name}}</h2> <h3>{{name}}</h3><h6>{{result}}</h6>'
   };
});




    <!-- comment-style directives -->
    <!-- directive: ninja ohyeah ?? ?? -->
    <!-- directive: person id=1,name=dude,age=25,job=software developer-->



// this one just adds a variable to the scope
// Seemed like a good idea at the time!
App.directive('ninja', function () {
    return {
        restrict: 'M',
        link: function (s, e, a) {
            console.log(a)
            s.japanese = a.ninja;
            console.log('scope', s)
        }
    };
});

App.directive('person', function () {
    return {
        restrict: 'M',
        link: function (s, e, a) {
            console.log(a)
            var personAttrs = a.person.split(',');
            s.person = {};
            for (var i = 0; i < personAttrs.length; i++) {
                // so dirty, so good enough
                s.person[personAttrs[i].split('=')[0]] = personAttrs[i].split('=')[1]

            }
            console.log('scope', s)
        }
    };
});

Share