使用 jquery.load() 函数加载角度页面
Posted
技术标签:
【中文标题】使用 jquery.load() 函数加载角度页面【英文标题】：Using jquery.load() function to load an angular page 【发布时间】：2017-11-25 05:39:45 【问题描述】：我现在在一个个人项目中工作，我正在混合 jquery 和 angularjs 本周我面临一个问题，即下一个
我想要做的是使用 jquery.load() 将一个角度页面加载到一个 div 中
(jquery 部分) 测试1.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<button class="btn btn-default" id="sss" type="button">load angular page into div using jquery</button>
<div id="tarkan"></div>
<script>
$("#sss").on("click", function (e)
$("#tarkan").load("/elements/test2.php");
);
</script>
（角部分） test2.php
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
x.Name + ', ' + x.Country
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http)
$http.get("https://www.w3schools.com/angular/customers.php").then(function (response)
$scope.myData = response.data.records;
);
);
</script>
</body>
</html>
test1.php 给了我这个
x.Name + ', ' + x.Country
而不是角度页面的数据。
今天我对此的部分解决方案是使用 iframe 而不是 jquery.load
<div id="tarkan"></div>
<iframe id="tarkan2" src="" frameborder="0" scrolling="no" ></iframe>
<script>
$("#sss").on("click", function (e)
//its not working
$("#tarkan").load("/elements/test2.php");
//its working
$("#tarkan2").attr("src", "/elements/test2.php");
);
</script>
我的最后一个问题是有没有办法使用 jquery 加载将 angularpage 加载到 div 中？ 非常欢迎任何解释或解决方案:)
【问题讨论】：
一定要用jquery吗？你不能为 test2.php 创建一个指令并在按钮点击时加载它吗？ 您已经在初始页面上加载了 angularjs。那你为什么不用它来加载你需要的模板呢？ @Y.Hewa 当然必须使用 jquery，是的，我可以根据您的回答创建一个指令。但我最初的问题是“有没有办法使用 jquery load 将 angularpage 加载到 div 中？”但感谢您的解决方案:) 非常受欢迎。通过你，我知道 templateURL 现在是如何工作的。 @xReeQz 我在初始页面中加载了 angularjs 脚本，试图在加载 angular 页面后，初始页面的 angularjs 脚本在加载的代码中工作。但它似乎不起作用或我不明白这些事件是如何运作的很好 【参考方案1】：你可以只用 angular 来实现这一点：通过对数据使用指令并在控制器中单击一个按钮来加载指令.. 指令仅在 $scope.show 为真时显示。
var app = angular.module('myApp', []);
app.controller('Mycontroller', function($scope)
$scope.show = false;
$scope.getData = function()
console.log("hi");
$scope.show = true;
;
)
app.directive('customersCtrl', function()
return
restrict: 'E',
controller: function($scope, $http)
$http.get("https://www.w3schools.com/angular/customers.php").then(function(response)
$scope.myData = response.data.records;
);
,
templateUrl: 'test2.tpl.html'
);
这是一个有效的plunker
【讨论】：
这似乎是我试图实现的完全角度解决方案，但正如我之前所说，我的原始答案是“有没有办法使用 jquery load 将 angularpage 加载到 div 中？”跨度> 混合使用 jQuery 和 AngularJS 有什么特别的原因吗？在您的情况下，据我所知，最好坚持使用 Angular 方法，而您的代码无法正常工作的原因是，一旦您在 jquery 中加载页面，角度就不知道它，因此它将无法工作.. "你混合使用 jQuery 和 AngularJS 有什么特别的原因吗？"是的，有一个具体的原因：学习是否在我的测试中表现得像我预期的那样好。这就是我所期望的答案：“您的代码无法正常工作的原因是，一旦您在 jquery 中加载页面，角度就不知道它因此它将无法工作..”:)。以上是关于使用 jquery.load() 函数加载角度页面的主要内容，如果未能解决你的问题，请参考以下文章