lets build a real simple custom directive with angular js, so directive implementation converts a couple of para into text slide show.
let see what i have done here,
in the html section
couple of tags a div which holds couple of paras which will be used to create a text slide show.
on the html tag there is a "ng-app" directive which bootstrap the angularjs. on div i have added my custom directive "text-slider". (is restricted 'A' to attribute)
starting off with angularjs module declaration since angularjs object is needed to define custom directive. a custom directive name as "textSlider", directive method take two arguments
directive name and function expression, injecting $interval service, to use inside the directive context.
function expression has to return a object for angularjs to identity it as a valid directive. at line 22 setting directive restrict to just as attribute, defining a link method, link method is mostly used when directive has DOM manipulation, link method takes three arguments,
scope : angularjs scope object
element : its a element object of directive matched (jqlite wrapped object)
attrs : attributes on element as key-value pair or hash.
code inside the sliderLink method should be pretty simple, using the jqlite element object to carry out DOM manipulation, using the angularjs $interval service,(angularjs wrapper for the setInterval method) to set timeout before text is changed.
example above is fairly simple directive in angularjs. many complex functionality can be implemented which i will be blogging as i come cross those topics.
please leave a comment help me learn and blog more effectively