I am exploring a more web-component approach to using Angular. As part of this, I have developed an http-request directive with url and response attributes. The implementation is successful, but I find that my directive relies on a template unnecessarily. I would like to eliminate the template element as it seems unnecessary for the functionality of the directive. Below is the code snippet:
<div>
<http-request url="http://jsonplaceholder.typicode.com/posts" response="items"></http-request>
<ul>
<li ng-repeat="item in items">{{ item.id }}</li>
</ul>
</div>
var myApp = angular.module('myApp', []);
myApp.directive('httpRequest', ['$http', function ($http) {
return {
restrict: 'E',
replace: true,
scope: {
response: '='
},
template: '<input type="text" ng-model="response" style="display:none"/>',
link: function (scope, element, attributes) {
$http.get(attributes.url)
.then(function (response) {
scope.response = response.data;
});
}
}
}]);
Fiddle: http://jsfiddle.net/HB7LU/9558/