jQuery .load() 等效 AngularJS

【问题标题】：jQuery .load() equivalent AngularJSjQuery .load() 等效 AngularJS
【发布时间】：2015-05-27 05:18:57
【问题描述】：

在 jQuery 中是否有等效于 $.load() 的 AngularJS？我希望能够从另一个域中提取（即在一个域上发布应用程序，但从一个完全独立的地址加载内容）。

【问题讨论】：

Angular 和 jQuery 非常不同。我建议您阅读：stackoverflow.com/questions/14994391/…
当您说“内容”时，您是指 HTML 或 JSON 数据还是什么？
@TheHippo Angular 使用 jQLite，如果之前加载了 jQuery，它将使用 jQuery，所以它们并没有什么不同，就像 Angular 使用 jQLite 的方式一样。一个是 MVC 框架，另一个是 Angular 使用（或可以使用）的 Javascript 库。

标签： jquery angularjs cross-domain

【解决方案1】：

jQuery 的使用方法并不真正适合 Angular，你不会在那里找到等效的 load（如果你非常想要的话，你显然可以使用 jQuery 而不是 jqLite）。

Angular 建议在类似的副手场景中使用 ngInclude 指令。否则，您需要制定自己的指令并将$http 请求的结果写入元素，特别是如果您需要更多控制。

如果您想“从特定 div 获取内容”，则无论如何都需要加载 jQuery 以在响应中使用选择器，这样的内容相当于 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));
            });
        }
    }
});

【讨论】：

【解决方案2】：

我认为您可以使用 ng-include 来做到这一点。它有一个内置的 onLoad 方法，您可以使用$http 或 $resource 模块调用从远程地址获取数据。

【讨论】：

我可以从该页面上的特定
获取内容吗？
不确定我的问题是否正确，但是是的；您可以将内容放入您选择的 div 中。只需确保您在正确的
中使用 ngInclude。请参阅包含基本本地 html 的这个小提琴（您需要做的就是用远程调用 onLoad 替换它）jsfiddle.net/mrajcok/MfHa6
是的，我想从另一个页面上的 div 中提取出来，并将其显示在我的页面上。

【解决方案3】：

在 jQuery 中是否有相当于 $.load() 的 AngularJS？

一般情况下，你可以在 angularjs 的控制器中编写一些代码，而不是 jQuery 中的 $.load 函数。

您的代码将是这样的。

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

我希望能够从另一个域中提取（即在一个域上发布应用程序，但从完全独立的地址加载内容）。

我的建议取决于您的内容是否包含 HTML 标签。

如果不包括 HTML 标签，你可以编写上面的代码。

如果包含 HTML 标签，我建议编写一些自定义指令代码。

【讨论】：

【解决方案4】：

我创建了刷新指令并通过编译调用点击事件，它对我有用

.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');
                }                       

            });
        }
    };
})

【讨论】：