Recently, I developed a directive called widget which functions similar to ng-view, but the template name is derived from an attribute.
app.directive('widget', function() {
return {
restrict: 'EA',
scope: true,
templateUrl: function(tElement, tAttrs) {
var page = tAttrs.name + ".html";
return window.location.href.replace(/[^\/]+$/, '') + page;
}
};
});
It operates successfully when I use it in this manner:
<widget name="page"/>
This will display page.html. However, using the following code snippet will not work (I understand that it will result in a 404 error until the input is completed, but this serves as an example):
<input ng-model="widgetName"/>
<widget name="{{widgetName}}"/>
In order to achieve a dynamic widget, I believe I need to construct a template using the link function. How can I accomplish this? I only know that I need to create a scope using {name: '@name'} to bind it with the attribute name and that I can utilize $http in the link function, but I am unsure of what steps to take once I retrieve the page from it.