Menu
I am trying to create a directive that would load a template. The template will then be cached so the second time you click on the element it would not try to load it but instead get recently loaded value from $templateCache.
I am noticing that in case of the cache hit I don't get any response from $http.get() method.
<html ng-app="website">
<body ng-controller="MyController">
<a href='#' ng-click="load()">Click Event</a>
<a href='#' click-load>Click Directive</a>
</body>
</html>
angular.module('website', []).directive('clickLoad', function($q, $http, $templateCache) {
return function(scope, element, attrs) {
function loadData() {
$http.get('http://fiddle.jshell.net', {
cache: $templateCache
}).then(function(result) {
alert('loaded ' + result.data.length + " bytes");
});
}
element.bind('click', loadData);
};
});
function MyController($scope, $http, $templateCache) {
$scope.load = function() {
$http.get('http://fiddle.jshell.net', {
cache: $templateCache
}).then(function(result) {
alert('loaded ' + result.data.length + " bytes");
});
}
}
I've created a fiddle simulating my scenario:
http://jsfiddle.net/3ea64/
Note that you can click Click Event link as many times as you want, however "Click Directive" link only works once if you clicked it first, it doesn't work at all if you click "Click Event" link first.
Any ideas are greatly appreciated.
741
I've played a bit around and used caching of AngularJS (describes here: http://docs.angularjs.org/api/ng.$http)
Here is a live demo: http://jsfiddle.net/4SsgA/
I've basically adjusted the $http syntax and use an ng-click directive instead of registering an event listener inside of the directive (just because I like it more :))
HTML:
<html ng-app="website">
<body ng-controller="MyController">
<a href='#' ng-click="load()">Click Event</a>
<a href='#' click-load ng-click="loadData()">Click Directive</a>
</body>
</html>
JS:
angular.module('website', []).directive('clickLoad', function($q, $http, $templateCache) {
return function(scope, element, attrs) {
scope.loadData = function() {
$http({method: 'GET', url: 'http://fiddle.jshell.net', cache: true}).then(function(result) {
alert('loaded ' + result.data.length + " bytes");
});
}
};
});
function MyController($scope, $http, $templateCache) {
$scope.load = function() {
$http({method: 'GET', url: 'http://fiddle.jshell.net', cache: true}).then(function(result) {
alert('loaded ' + result.data.length + " bytes");
});
}
}
I would suggest creating a separate service that will do the job:
YourModule.factory('Utils', ['$q', '$http', '$templateCache', function ($q, $http, $templateCache) {
var Service = function() {
};
Service.prototype.TemplatePromise = function (keyOrUrl) {
var data = $templateCache.get(keyOrUrl);
if (data) {
return $.when(data);
} else {
var deferred = $.defer();
$http.get(keyOrUrl, { cache: true }).success(function (html) {
$templateCache.put(keyOrUrl, html);
deferred.resolve(html);
});
return deferred.promise;
}
};
return new Service();
}]);
Using this approach will add flexibility and isolation to the way you get templates, most probably you would want it to be done your own independent way...
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
