使用 Jquery 调用 Angular 函数

2024-01-12

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

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>

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


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

the 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,否则它将无法工作(感谢@andersh)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Jquery 调用 Angular 函数 的相关文章

  • AngularJS 忽略一些标头

    我正在玩一点 Angular 遇到了一个小问题 我正在尝试为http响应设置一个自定义标头 然后在角度方面读取它的值 标头已设置 我确信这一点 因为 chrome 的调试工具确认了 这意味着服务器端没问题 到目前为止 一切都很好 当我尝试通
  • Kendo UI 和 Angular - $scope 中没有小部件

    我使用 Kendo UI 版本 2014 2 716 和 AngularJS 版本 1 2 27 并使用指令创建了一个网格 div div div div
  • AngularJS:无论 ng-if 条件如何,指令模板都会加载

    我使用指令将代码分成模板 并且我希望这些模板根据 if 条件加载 现在 当我查看网络流量时 Angular 会将所有模板发送到客户端 无论是否ng if条件满足 div class container ul ul div
  • ui-router:传递一个不在url中的参数?

    我在传递不是 url 中的参数的参数时遇到问题 我基本上对点击事件有以下内容 let stateParams id event info id info event info this state go home showinfo stat
  • 使用 AngularJs NgResource 从本地主机加载 JSON 文件

    Overview 我正在构建一个应用程序 在 MAMP 上运行 该应用程序包含联系信息 一旦该部分正常运行 该应用程序将扩展以包含更多数据 例如项目名称和截止日期 问题 当用户访问时 projects php project 我希望他们看到
  • 无头镀铬:镀铬无法到达

    我正在使用 Chrome headless 来运行量角器测试 它运行了一段时间 但之后我收到以下错误 15 36 30 E 启动器 chrome 无法访问 会话信息 无头 chrome 59 0 3071 115 驱动程序信息 chrome
  • Angular Bootstrap $modal 如何动画化?

    我没有使用任何引导样式 我正在完全定制一切 制作动画相当简单 因为 modal uses fade in 我能够覆盖这些样式并且效果很好 但是模态是如何动画出来的呢 我没有看到任何类别被应用或删除 它会立即从 DOM 中删除 我怎样才能定制
  • Angular JS:当我们已经有了具有作用域的指令控制器时,指令的链接函数需要什么?

    我需要对范围和模板执行一些操作 看来我可以在以下任何一个中做到这一点link函数或controller函数 因为两者都可以访问该范围 什么时候我必须使用link功能而不是控制器 angular module myApp directive
  • AngularJS,ng-click 与 ng:click 与 ngClick

    我正在学习 AngularJS 我对遇到的指令的不同用法感到有点困惑 例如 有时我会看到类似 ngcolon click tr 有时我会看到 ngdash click tr 在 Angular 文档中 指令显示为 ngClick 驼峰式 没
  • 通过应用程序配置 AngularJS 动态提供程序选项

    我有接受以下配置的提供程序模块 angular module app search config searchProvider function searchProvider searchProvider options resultLim
  • 使用 Protractor 检查浏览器控制台中没有错误

    我正在使用 Protractor 来测试 AngularJS 我想检查在测试结束时是否没有发生未捕获的异常并打印到浏览器控制台 有没有一种简单的方法可以做到这一点 如果您将 Protractor 与 Jasmine 一起使用 请使用以下代码
  • Angular ui-select 标记在模糊时丢失文本输入

    情况 大家好 我在用Angular ui 选择 https github com angular ui ui select对于我的应用程序 以便从数据库中选择用户 如果用户不在列表中 则可以使用标记来输入新条目 通过写入名称并按 ENTER
  • AngularJS - 为什么使用“控制器作为虚拟机”?

    整个周末 我都很苦恼 不明白为什么子控制器无法识别父控制器的功能 我很快意识到将我的控制器作为虚拟机是原因 div div div div div div 当然 现在看来很明显 child1 和 2 都不会看到 ParentCtrl 中的函
  • 将表类型添加到 JSON 编辑器

    我想了解的代码这个 JSON 编辑器 http mb21 github io JSONedit 并修改它 In 指令 js https github com mb21 JSONedit blob gh pages js directives
  • AngularJS 服务返回未定义

    我有以下服务 app services emailService http sce function http sce return getMessage function messageId callback http get api e
  • 容器中的等间距 div

    这是我的例子 http jsfiddle net rtCP3 62 http jsfiddle net rtCP3 62 我有 3 个 或更多 div 我想在一个容器中均匀分布 当将 Angular 与 ng repeat 一起使用时 样式
  • 清除 Angular 表单提交中的输入字段?

    我认为 setPristine 应该执行此操作 但它不在我的项目中 这是我的表格 form name new project ng submit create project div create wrapper input project
  • 比较 angularjs 指令中的两个字段

    我正在尝试创建可用于比较多个项目中的两个字段的指令 MarkUp div class form group div
  • AngularJS 绝对类型 Visual Studio 2015

    我正在尝试让我的第一个 angularjs 项目在 Visual Studio 2015 中工作 工作正常 直到我尝试转移到 Typescript 安装了DefinitelyTyped项目并收到很多错误消息 以下是重现它的方法 创建一个空的
  • $state.go 不适用于嵌套状态

    下面描述的我的问题与此处描述为错误的问题类似 https forum ionicframework com t blocker bug with state go navigation 11036 https forum ionicfram

随机推荐