Javascript 如何从页面中的jquery调用angular js函数控制器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29327325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call angular js function controller from jquery in page
提问by Tajkumar
How to call angularjs function or controller from jquery I am new to this angularjs here is my function here i have to pass the var1 and var2 from jquery i have searched many articles but i cant understand. Please help me
如何从 jquery 调用 angularjs 函数或控制器我是这个 angularjs 的新手，这里是我的函数，我必须从 jquery 传递 var1 和 var2 我已经搜索了很多文章，但我无法理解。请帮我
<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; });
}
回答by Zeeshan Hassan Memon
If I speak general, there can be cases when jQuery use is need in Angularjs app i.e. jQuery plugin is used that isn't available in Angular version.
如果我说一般，在 Angularjs 应用程序中可能需要使用 jQuery，即使用了 Angular 版本中不可用的 jQuery 插件。
Every Controller has $scope/this and You can access the scope of an angular element if you have an ID tag attached to the same DOM element as the ng-controller:
每个控制器都有 $scope/this 并且如果您将 ID 标签附加到与 ng-controller 相同的 DOM 元素，则您可以访问 angular 元素的范围：
the DOM:
DOM：
<div id="myctrl" ng-controller="MyCtrl"></div>
your 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 you do this and it will access that controller and call that function :
在 jQuery 中，您执行此操作，它将访问该控制器并调用该函数：
angular.element('#myctrl').scope().anyFunc('value1','value2');
Running Sample
运行示例
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>Happy Helping!
乐于助人！
回答by Tajkumar
Both the above answers helped me a lot finally i got the answers
以上两个答案对我都有很大帮助，最后我得到了答案
$(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>
回答by Anik Islam Abhi
Try Like this
试试这样
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>