- Home
- Introduction
- Controllers
-
Directives
- Enabling/Disabling DOM Elements Conditionally
- Changing the DOM in response to user actions
- Rendering an HTML Snippet in a Directive
- Rendering a Directive's DOM Node Children
- Passing Configuration Params Using HTML Attributes
- Repeatedly Rendering Directive's DOM Node Children
- Directive-to-Directive Communication
- Testing Directives
- Filters
- Using Forms
- Consuming External Services
- Urls Routing and Partials
- Common User Interface Patterns
- Backend Integration with Ruby on Rails
- Backend Integration with Node Express
Rendering an HTML Snippet in a Directive
Problem
You wish to render an HTML snippet as a reusable component.
Solution
Implement a directive and use the template attribute to define the HTML.
<body ng-app="MyApp">
<my-widget/>
</body>var app = angular.module("MyApp", []);
app.directive("myWidget", function() {
return {
restrict: "E",
template: "<p>Hello World</p>"
};
});Discussion
This will render the Hello World paragraph as a child node of your my-widget element. If you want to replace the element entirely with the paragraph you will also have to return the replace attribute:
app.directive("myWidget", function() {
return {
restrict: "E",
replace: true,
template: "<p>Hello World</p>"
};
});Another option would be to use a file for the HTML snippet. In this case you will need to use the templateUrl attribute, for example as follows:
app.directive("myWidget", function() {
return {
restrict: "E",
replace: true,
templateUrl: "widget.html"
};
});The widget.html should reside in the same directory as the index.html file. This will only work if you use a web server to host the file. The example on Github uses angular-seed as bootstrap again.
