使用 Jquery 调用 Angular 函数 [英] Call Angular Function with Jquery

查看：26
本文介绍了使用 Jquery 调用 Angular 函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

文本框中有数据时如何调用angular函数?这是我的代码

html

<html xmlns:ng="http://angularjs.org" data-ng-app="flightSearch" lang="en"><头><script src="js/jquery-1.9.1.js"></script><script src="js/jquery-ui.js"></script><script src="js/app.js"></script><身体><div data-ng-controller="flightSearchController"><input type="text" data-ng-model="query" data-ng-change="flightSearch()" placeholder="e.g RGN>MDL, KAW>RGN" id="targetTextField"/><input id="options3" type="text" style="display:none;"/><select id="选项"><option value="From" selected>From</option><option value="RGN" ng-click="flightSearch()">RGN</option><option value="NYU" ng-click="flightSearch()">纽约大学</option><option value="MDL" ng-click="flightSearch()">MDl</option><option value="HEH" ng-click="flightSearch()">HEH</option></选择><select id="options2"><option value="To" selected>To</option><option value=">RGN" ng-click="flightSearch()">RGN</option><option value=">NYU" ng-click="flightSearch()">纽约大学</option><option value=">MDL" ng-click="flightSearch()">MDl</option><option value=">HEH" ng-click="flightSearch()">HEH</option></选择><ul><li data-ng-repeat="过滤项中的路由"><div data-ng-bind-html="route.displayRoute"></div>

js

<script src="js/angular-sanitize.min.js"></script><script type="text/javascript">函数 buildPaths(route){var points = route.split(">");var 路径 = {};for(var i = 0; i " + to]){if(j-i " + to][0])路径[来自+>"+ to] = [j-i,points.slice(i,j+1).join(">")]}别的{路径[来自+>"+ to] = [j-i,points.slice(i,j+1).join(">")]}}}//对于j}//为我返回路径；}var flightSearch = angular.module('flightSearch',['ngSanitize']);flightSearch.controller('flightSearchController', function ($scope){//数据定义，路由是实际数据，//显示路线仅用于突出显示目的.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: []},{路由:RGN>MDL>STW>RGN"，显示路由:"，路径:[]}，{route: "RGN>NYU>MDL>MYT>PTO>MYT>MDL>NYU>RGN", displayRoute: "", 路径: []},{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: []}];//预先计算可能的路径最短距离for(var r = 0; r<script type="text/javascript">$(函数(){$("#options").change(function(){设置目标()});$("#options2").change(function(){设置目标()；});$("#options3").change(function(){设置目标()；});$("#targetTextField").change(function(){设置目标()；});});函数集目标(){var tmp = $("#options").val();tmp += $("#options2").val();tmp += $("#options3").val();$('#targetTextField').val(tmp);}</html>

当两个选择选项在文本框中插入数据时想在 change.strong 文本上调用搜索功能

解决方案

如果您将 ID 标签附加到与 ng-controller 相同的 DOM 元素，则您可以访问 angular 元素的范围:

DOM:

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

您的控制器:

function mycontroller($scope) {$scope.myfunction = function() {//在这里做一些事情}}

在 jquery 中执行此操作，它将访问该控制器并调用该函数:

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

记得打电话

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

如果你在 myfunction 范围内更新一个函数变量，否则它将无法工作(感谢@andersh)

How to call angular function when data in text box? here is my code

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="e.g 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(j-i < paths[from + ">" + to][0])
                                paths[from + ">" + to] = [j-i,points.slice(i,j+1).join(">")]
                        }else{
                            paths[from + ">" + to] = [j-i,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>

when two select option insert data in text box want to call search function on change.strong text

解决方案

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:

the DOM:

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

your controller:

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

in jquery you do this and it will access that controller and call that function :

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

Do remember to call 

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

if you update a function variable within scope in myfunction, it will not work otherwise (thanks @andersh)

这篇关于使用 Jquery 调用 Angular 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆