Wie man angular js Funktionscontroller von jquery auf Seite

Question

ruft

Wie angularjs Funktion oder Controller von jquery Ich bin neu zu diesem angularjs hier ist meine Funktion hier muss ich die var1 übergeben und var2 von jquery ich habe viele gesucht Artikel, aber ich kann es nicht verstehen. Bitte helfen Sie mir

<script type="text/javascript"> 

    function customersController($scope, $http) { 
     $http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2") 
     .success(function (response) { $scope.names = response; }); 
    } 

Answer 1

Wenn ich allgemein sprechen, kann es Fälle geben, wenn jQuery Verwendung in müssen, ist AngularJS app heißt jQuery-Plugin verwendet wird, die nicht in abgewinkelte Ausführung ist.

Jeder Controller verfügt über $ scope/diese und Sie können den Umfang eines Winkelelement zugreifen, wenn Sie einen ID-Tag auf dem gleichen DOM-Element als ng-Controller angeschlossen haben:

das DOM:

<div id="myctrl" ng-controller="MyCtrl"></div> 

Ihr Controller:

function MyCtrl($scope) { 
    $scope.anyFunc = function(var1, var2) { 
     // var1, var2 passed from jquery call will be available here 
     //do some stuff here 
    } 
} 

in jQuery tun Sie dies, und es wird, dass die Steuerung zugreifen und diese Funktion aufrufen:

angular.element('#myctrl').scope().anyFunc('value1','value2'); 

Lauf Probe

angular.module('app', []) 
 
    .controller('MyCtrl', function ($scope) { 
 
    $scope.anyFunc = function (var1, var2) { 
 
     alert("I am var1 = " + var1); 
 
     alert("I am var2 = " + var2); 
 
    }; 
 
}); 
 

 
$(function(){ 
 

 
    $("#hit").on("click",function(){ 
 
     
 
      angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE'); 
 
    
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div id="myctrl" ng-app='app' ng-controller="MyCtrl"> 
 
Call via jQuery 
 
<button id="hit">Call</button> 
 
</div>

Glücklich zu helfen!

Answer 2

gefällt das

angular.module('app', []) 
 
    .controller('jqueryCtrl', function ($scope) { 
 
     $scope.callFromJquery = function (data) { 
 
      alert(data); 
 
     }; 
 
    }); 
 
$(function() { 
 
    $("#press").on("click", function() { 
 
     angular.element($("#jquery")).scope().callFromJquery('I Called You ! Angular !'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div id="jquery" ng-app='app' ng-controller="jqueryCtrl"> 
 
Just Press ME 
 
<button id="press">Press ME</button> 
 
</div>

Answer 3

Sowohl die oben genannten Antworten Versuchen Sie mich schließlich sehr geholfen habe ich die Antworten

$(function(){ 

    $("#hit").on("click",function(){ 

     angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE'); 

    }); 

}); 

function customersController($scope, $http) { 
    $scope.anyFunc = function (var1, var2) { 
    alert("I am var1 = " + var1); 
    alert("I am var2 = " + var2); 
$http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2") 
    .success(function (response) { $scope.names = response; }); 
}; 
    } 



<div id="myctrl" ng-app='' ng-controller="MyCtrl"> 
Call via jQuery 
<button id="hit">Call</button> 
    </div>