Custom Components: Part 1
In this video, John Lindquist walks through adding new tags to the browser using an AngularJS directive. Here, he uses the Showdown.js library to create a <markdown> tag that lets you write Markdown instead of HTML.Key Takeaways
- AngularJS directives transform HTML as you direct.
- You can use directives to define your own elements, attributes, classes, or comment types.
- Using the directive's linking function is one method that lets you specify the replacement content.
- AngularJS plays very well with other libraries.
Source (edit on JSFiddle)
html
<div ng-app="myApp">
<markdown>
# Hello World!
- Zeppelin
- That guy
- Kronos
</markdown>
</div>
<markdown>
# Hello World!
- Zeppelin
- That guy
- Kronos
</markdown>
</div>
services.js
angular.module('myApp', []).directive('markdown', function() {
var converter = new Showdown.converter();
return {
restrict: 'E',
link: function(scope, element, attrs) {
var htmlText = converter.makeHtml(element.text());
element.html(htmlText);
}
}
});
var converter = new Showdown.converter();
return {
restrict: 'E',
link: function(scope, element, attrs) {
var htmlText = converter.makeHtml(element.text());
element.html(htmlText);
}
}
});
0 comments:
Post a Comment