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

后端未结

关注

 2  679

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

相关标签:

2条回答

走了就别回头了

2021-02-04 15:14

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 讨论(0)

南旧

2021-02-04 15:20

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...

0 讨论(0)