使用 jquery.load() 函数加载角度页面答案

【问题标题】：Using jquery.load() function to load an angular page使用 jquery.load() 函数加载角度页面
【发布时间】：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="" width="100%" height="700px" 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 脚本在加载的代码中工作。但它似乎不起作用或我不明白这些事件是如何运作的很好

标签： php html angularjs iframe jquery-load

【解决方案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 中加载页面，角度就不知道它因此它将无法工作..”:)。