Mit jquery.load() Funktion einer Winkel Seite

im in einem persönlichen Projekt arbeiten laden jetzt und im jquery Mischen und AngularJS und in dieser Woche i Gesicht ein Problem, dass die nächsteMit jquery.load() Funktion einer Winkel Seite

was im Versuch zu tun wird geladen eine Winkel Seite in eine div Verwendung jquery.load()

(jquery part) 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>

(Winkelteil) 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>

die test1.php gibt mir diese

{{ x.Name + ', ' + x.Country }}

stattdessen die Daten der Winkel Seite.

heute meine Teillösung hierfür ist die Verwendung von iframes statt mit 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>

meiner letzten Frage gibt es eine Möglichkeit, die angularpage in ein div mit jquery Last zu laden? beliebige Erklärungen oder Lösungen sind sehr willkommen :)

Quelle

2017-06-22 Billy Mainor Lemus

müssen Sie jquery verwenden? Kannst du nicht eine Direktive für test2.php erstellen und auf Knopfdruck laden? – Shayuh

Sie haben angularjs bereits auf Ihrer Startseite geladen. Warum also nicht zum Laden der benötigten Vorlage? – xReeQz

@ Y.Hewa natürlich, die jquery verwenden müssen, und ja, ich kann eine Direktive aus der Antwort von Ihnen gemacht erstellen. Aber meine ursprüngliche Frage war: "Gibt es eine Möglichkeit, die Winkelseite mit jquery load in ein div zu laden?" aber danke für deine lösung :) ist sehr willkommen. von dir weiß ich, wie die templateURL jetzt funktioniert. –

könnte man dies mit nur eckig erreichen: indem man für die Daten eine Direktive verwendet und einen Button in den Controller klickt, der die Direktive laden würde. Die Direktive wird nur angezeigt wenn $ scope.show ist wahr.

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

hier ist eine Arbeits plunker

Quelle

2017-06-22 07:37:09 Shayuh

es scheint die voll kantige Lösung zu sein, was ich versuche zu erreichen, aber wie ich schon sagte meine ursprüngliche Antwort war "gibt es eine Möglichkeit, die Winkelseite in ein div mit jquery laden?" –

Gibt es einen bestimmten Grund, warum Dein Mischen von jQuery und AngularJS? In Ihrem Fall, soweit ich weiß, dass es am besten ist, sich an Angular-Ansatz zu halten, und der Grund, warum Ihr Code nicht funktioniert, ist, weil sobald Sie die Seite in jquery laden, weiß der Winkel nicht darüber deshalb wird es nicht funktionieren. – Shayuh

"Is Gibt es einen bestimmten Grund, warum Sie jQuery und AngularJS mischen? " ja es gibt und bestimmten Grund: zu lernen, wenn funktioniert so gut, wie ich unter meinen Test-Porpouses erwartet. und das ist, was ich als Antwort erwartet: "und der Grund, warum Ihr Code nicht funktioniert, ist, weil sobald Sie die Seite in Jquery laden die eckige nicht darüber wissen, daher wird es nicht funktionieren .." :). –

Mit jquery.load() Funktion einer Winkel Seite

Antwort

Verwandte Themen