JQuery.load () equivalent of AngularJS

Question

Is there a jQuery equivalent of AngularJS for $.load() ? I want to be able to retrieve from another domain (i.e. host the application in one domain, but download content from a completely different address).

Answer 1

jQuery usage methods are not suitable for Angular, you won't find the load equivalent there (you can obviously use jQuery instead of jqLite if you want to).

Angular suggests using ngInclude for such scenarios. Otherwise, you need to create your own directive and write the result of the $http request to the element, especially if you need more control.

If you want to “get content from a specific div,” you will need to load jQuery anyway to use selectors in the response, something like this is equivalent to load :

 app.directive('load', function ($http, $compile) { return { link: function (scope, element, attrs) { $http.get('link.htm').success(function (response) { var contents = angular.element("<div>").html(response).find("#someelement"); element.empty().append($compile(contents)(scope)); }); } } }); 

Answer 2

I believe you can do this using ng-include . This has a built-in onLoad method that you can call to retrieve your data from a remote address using $ http or $ resource modules.

Answer 3

Does AnglerJS have the equivalent of $ .load () in jQuery?

In the normal case, you can write some code in the angularjs controller instead of the $ .load function in jQuery.

Your code will be like this.

 angular.module('YourModule', []) .controller('YourController', function($http){ // You can write some code here !! //$http.get(... //$http.post(... }); 

I want to be able to pull from another domain (i.e. host the application in one domain, but download content from a completely separate address).

My advice depends on whether your content contains HTML tags or not.

If you do not include HTML tags, you can write code as described above.

If you include HTML tags, I recommend writing custom directive code.

Answer 4

I make a refresh directive and fire a click event using compile and this works for me

 .directive('refreshConfirm', function($http,$compile) { return { restrict: 'A', link: function postLink(scope, element, attrs) { element.bind('click', function () { $http.get(page_url).then(successCallback, errorCallback); function successCallback(response){ //success code var ty=response.data; var appi=angular.element(document.querySelector('#page_content')).html($compile(ty)(scope)); } function errorCallback(error){ //error code alert('error'); } }); } }; })