Question

我现在在个人项目中工作，我正在混合jquery和angularjs 本周我面临的一个问题是下一个

我想要做的是使用jquery.load（）

将角度页面加载到div中

（jquery部分） Test1.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中吗？任何解释或解决方案都非常受欢迎：）

Answer 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（）函数加载角度页面

1 个答案: