Sử dụng $ http và $ templateCache từ trong một chỉ thị không trả lại kết quả

Tôi đang cố tạo một chỉ thị có thể tải mẫu. Mẫu sau đó sẽ được lưu vào bộ nhớ cache để lần thứ hai bạn nhấp vào phần tử nó sẽ không cố gắng tải nó mà thay vào đó lấy giá trị được tải gần đây từ $ templateCache.

Tôi nhận thấy rằng trong trường hợp xảy ra lần truy cập bộ nhớ cache, tôi không nhận được bất kỳ phản hồi nào từ phương thức $ http.get().

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

Tôi đã tạo một fiddle mô phỏng kịch bản của tôi:

http://jsfiddle.net/3ea64/

Lưu ý rằng bạn có thể nhấp vào Nhấp vào liên kết tổ chức sự kiện nhiều lần như bạn muốn, tuy nhiên "Click Chỉ thị" liên kết chỉ hoạt động một lần nếu trước tiên bạn nhấp vào nó, nó không hoạt động chút nào nếu bạn nhấp vào liên kết "Nhấp vào sự kiện" trước tiên.

Bất kỳ ý tưởng nào được đánh giá cao.

Nguồn

2012-11-01 user43685

tôi đã chơi một chút xung quanh và sử dụng bộ nhớ đệm của AngularJS (mô tả ở đây: http://docs.angularjs.org/api/ng $ http.)

Đây là một bản demo trực tiếp: http://jsfiddle.net/4SsgA/

tôi đã cơ bản điều chỉnh $ http cú pháp và sử dụng một chỉ thị ng nhấp chuột thay vì đăng ký một người biết lắng nghe sự kiện bên trong chỉ thị (chỉ vì tôi thích nó hơn :))

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

Nguồn

2012-11-01 07:51:01

Cảm ơn phản hồi của bạn. Bạn đang đúng vấn đề là ràng buộc. Tôi đã thay đổi mã của mình thành phạm vi $. $ Áp dụng giống như ng-click và nó hoạt động. Xem tại đây: http://jsfiddle.net/3ea64/1/ – user43685

Xin cảm ơn người dùng43685. Điều đó áp dụng phạm vi chỉ là điều tôi cần để có được http làm việc ngay trong chỉ thị của tôi – Erich

tôi sẽ khuyên bạn nên tạo một dịch vụ riêng biệt mà sẽ thực hiện công việc:

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(); 
}]);

Sử dụng phương pháp này sẽ bổ sung thêm tính linh hoạt và cách ly để theo cách bạn lấy mẫu, có lẽ hầu hết bạn sẽ muốn nó được thực hiện theo cách độc lập của riêng bạn ...

Nguồn

2013-06-20 20:57:52 Lu4

Bạn không cần phải sử dụng '$ q' bên trong' $ http.get() 'như' $ http' đã trả về một 'lời hứa': 'return $ http.get (keyOrUrl, {cache: true}). thành công (function (html) {$ templateCache.put (keyOrUrl, html); trả về html;});' – GFoley83

Nhận xét hay, cảm ơn! – Lu4

Sử dụng $ http và $ templateCache từ trong một chỉ thị không trả lại kết quả

Trả lời

Các vấn đề liên quan