Using $http and $templateCache from within a directive doesn't return results

Question

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 instea

Answer 1

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:

    Click Event
    Click Directive

​

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");
        });
    }
}​