Valid AngularJS Directives
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 Angular is going to have control over the DOM elements contained within this div.<div ng-app="awesomeApp"></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)
}
};
});