Home/ Questions/Q 8776669
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T19:06:43+00:00

I am trying to create a directive that would load a template. The template

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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