用Jquery调用Angular函数

当文本框中的数据如何调用angularfunction? 这是我的代码

HTML

<!DOCTYPE html!> <html xmlns:ng="http://angularjs.org" data-ng-app="flightSearch" lang="en"> <head> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/app.js"></script> </head> <body> <div data-ng-controller="flightSearchController"> <input type="text" data-ng-model="query" data-ng-change="flightSearch()" placeholder="eg RGN>MDL, KAW>RGN" id="targetTextField" /> <input id="options3" type="text" style="display:none;"/> <select id="options"> <option value="From" selected>From</option> <option value="RGN" ng-click="flightSearch()">RGN</option> <option value="NYU" ng-click="flightSearch()">NYU</option> <option value="MDL" ng-click="flightSearch()">MDl</option> <option value="HEH" ng-click="flightSearch()">HEH</option> </select> <select id="options2"> <option value="To" selected>To</option> <option value=">RGN" ng-click="flightSearch()">RGN</option> <option value=">NYU" ng-click="flightSearch()">NYU</option> <option value=">MDL" ng-click="flightSearch()">MDl</option> <option value=">HEH" ng-click="flightSearch()">HEH</option> </select> <ul> <li data-ng-repeat="route in filteredItems"> <div data-ng-bind-html="route.displayRoute"></div> </li> </ul> </div> </body> 

JS

 <script src="js/angular.min.js"></script> <script src="js/angular-sanitize.min.js"></script> <script type="text/javascript"> function buildPaths(route){ var points = route.split(">"); var paths = {}; for(var i = 0; i < points.length; i++){ var from = points[i]; for(var j = i; j < points.length; j++){ var to = points[j]; if (from != to){ if(paths[from + ">" + to]){ if(ji < paths[from + ">" + to][0]) paths[from + ">" + to] = [ji,points.slice(i,j+1).join(">")] }else{ paths[from + ">" + to] = [ji,points.slice(i,j+1).join(">")] } } }//for j }//for i return paths; } var flightSearch = angular.module('flightSearch',['ngSanitize']); flightSearch.controller('flightSearchController', function ($scope){ // Data definitions, route is actual data, // display route is for higlight display purpose only. var dataRoutes = [ {route: "RGN>NYU>MDL>HEH>RGN", displayRoute: "", paths: []}, {route: "RGN>HEH>KYT>THK>KYT>HEH>RGN", displayRoute: "", paths: []}, {route: "RGN>MDL>HEH>NYU>RGN", displayRoute: "", paths: []}, {route: "RGN>MDL>STW>RGN", displayRoute: "", paths: []}, {route: "RGN>NYU>MDL>MYT>PTO>MYT>MDL>NYU>RGN", displayRoute: "", paths: []}, {route: "RGN>HEH>NYU>MDL>RGN", displayRoute: "", paths: []}, {route: "RGN>TVY>MGU>KAW>MGU>TVY>RGN", displayRoute: "", paths: []}, {route: "RGN>TVY>KAW>TVY>RGN", displayRoute: "", paths: []}, {route: "RGN>KAW>MGU>TVY>RGN", displayRoute: "", paths: []}]; // Pre-calculate the possible path the shortest distance for(var r = 0; r< dataRoutes.length; r++){ dataRoutes[r]["paths"] = buildPaths(dataRoutes[r]["route"]); dataRoutes[r]["displayRoute"] = dataRoutes[r]["route"]; } // Assign the routes. This is unfiltered origintal data (all) $scope.routes = dataRoutes; // This is filtered list for dispaly $scope.filteredItems = $scope.routes; // Search/filter function. This updates filteredItems list $scope.flightSearch = function(){ if($scope.query.length > 6){ $scope.filteredItems = []; for(var index in $scope.routes){ $scope.routes[index]["displayRoute"] = $scope.routes[index]["route"]; if($scope.routes[index]["paths"][$scope.query] !== undefined){ var match = $scope.routes[index]["paths"][$scope.query][1];$scope.query $scope.routes[index]["displayRoute"] = $scope.routes[index]["route"].replace(match,"<b>" + match + "</b>"); $scope.filteredItems.push($scope.routes[index]); } } }else{ for(var r = 0; r< $scope.routes.length; r++){ $scope.routes[r]["displayRoute"] = $scope.routes[r]["route"]; } $scope.filteredItems = $scope.routes; } } }); flightSearch.filter("highlight",function(){ return function(text){ return text; } }); </script> <script type="text/javascript"> $(function() { $("#options").change(function(){ setTarget() }); $("#options2").change(function(){ setTarget(); }); $("#options3").change(function(){ setTarget(); }); $("#targetTextField").change(function(){ setTarget(); }); }); function setTarget(){ var tmp = $("#options").val(); tmp += $("#options2").val(); tmp += $("#options3").val(); $('#targetTextField').val(tmp); } </script> </html> 

当文本框中的两个select选项插入数据要调用强制文本上的searchfunction

如果您将一个ID标记附加到与ng-controller相同的DOM元素,则可以访问angular元素的作用域:

DOM:

 <div id="mycontroller" ng-controller="mycontroller"></div> 

你的控制器:

 function mycontroller($scope) { $scope.myfunction = function() { //do some stuff here } } 

在jQuery中,你这样做,它将访问该控制器并调用该函数:

 angular.element('#mycontroller').scope().myfunction(); 

记得打电话

 angular.element('#mycontroller').scope().$apply() 

如果你在myfunction的作用域内更新了一个函数variables,那么它将无法工作(谢谢@andersh)

如果你在你的代码中使用这样的东西

 <div id="mycontroller" ng-controller="mycontroller as child"></div> 

代替

 <div id="mycontroller" ng-controller="mycontroller"></div> 

访问将是

 angular.element('#mycontroller').scope().child.myFunction(); 

代替

 angular.element('#mycontroller').scope().myFunction(); 

在任何情况下,你也需要这个电话

 angular.element('#mycontroller').scope().$apply(); 

用于访问控制器的范围元素

 angular.element(document.getElementById('controllerId')).scope().scope_variable_array.push(item); 

用于访问控制器function

 angular.element(document.getElementById('controllerId')).scope().function_name(); 

controllerId:在HTML中定义ng控制器的标记ID

我使用这样的东西:

var $scope = angular.element($('[ng-controller]')).scope()

并操作$ scopevariables。 您可以检查控制台

我参考这个post ,把函数赋值给全局对象window

  // In angularJS script $scope.foo = function() { console.log('test'); }; $window.angFoo = function() { $scope.foo(); $scope.$apply(); }; // In jQuery if (window.angFoo) { window.angFoo(); }