javascript - 如何从页面中的jquery调用angular js函数 Controller

Question

如何从 jquery 调用 angularjs 函数或 Controller 我是这个 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; });
    }

Answer 1

如果我笼统地说，可能会出现 Angularjs 应用程序需要使用 jQuery 的情况，即使用的 jQuery 插件在 Angular 版本中不可用。

每个 Controller 都有 $scope/this 并且如果你有一个 ID 标签附加到与 ng-controller 相同的 DOM 元素，你可以访问 Angular 元素的范围:

DOM:

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

你的 Controller :

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

在 jQuery 中，您执行此操作，它将访问该 Controller 并调用该函数:

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

运行样本

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>

帮助愉快!