jQuery .load() 等效 AngularJS

Posted 2023-02-27

【中文标题】jQuery .load() 等效 AngularJS

【英文标题】：jQuery .load() equivalent AngularJS

【发布时间】：2015-05-27 05:18:57

【问题描述】：

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

【问题讨论】：

Angular 和 jQuery 非常不同。我建议您阅读：***.com/questions/14994391/…

当您说“内容”时，您是指 html 或 JSON 数据还是什么？

@TheHippo Angular 使用 jQLite，如果之前加载了 jQuery，它将使用 jQuery，所以它们并没有什么不同，就像 Angular 使用 jQLite 的方式一样。一个是 MVC 框架，另一个是 Angular 使用（或可以使用）的 javascript 库。

【参考方案1】：

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

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

            );
        
    ;
)