从使用$ http和$ templateCache一个指令中没有返回结果

本文介绍了从使用$ http和$ templateCache一个指令中没有返回结果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个指令，将加载的模板。然后，模板将被缓存，以便您单击该元素在第二时间也不会尝试加载它，而是从$ templateCache得到最近被载入值。

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.

我注意到，在缓存命中的情况下，我没有得到从$ http.get（）方法的任何回应。

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:

请注意，您可以点击Click事件链接只要你想了很多次，但点击指令，如果你第一次点击它的链接只能使用一次，它不会在所有的工作，如果你点击点击事件链接第一。

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.

任何想法是极大的AP preciated。

Any ideas are greatly appreciated.

推荐答案

我打得有点左右和使用AngularJS（缓存这里描述：的。$ HTTP）

I've played a bit around and used caching of AngularJS (describes here: http://docs.angularjs.org/api/ng.$http)

下面是现场演示：

我已经基本上调整$ HTTP语法和使用NG-点击指令，而不是注册内部指令（只是因为我喜欢它更多：）的事件侦听器）

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

这篇关于从使用$ http和$ templateCache一个指令中没有返回结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！