如何调用 AngularJS 指令中定义的方法?

2024-03-03

我有一个指令,这是代码:

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {

            var center = new google.maps.LatLng(50.1, 14.4); 
            $scope.map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer()

            var showDirections = function(dirResult, dirStatus) {
                if (dirStatus != google.maps.DirectionsStatus.OK) {
                    alert('Directions failed: ' + dirStatus);
                    return;
                  }
                  // Show directions
                dirRenderer.setMap(map);
                //$scope.dirRenderer.setPanel(Demo.dirContainer);
                dirRenderer.setDirections(dirResult);
            };

            // Watch
            var updateMap = function(){
                dirService.route($scope.dirRequest, showDirections); 
            };    
            $scope.$watch('dirRequest.origin', updateMap);

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $scope.map_options.zoom = map.getZoom();
              });

            dirService.route($scope.dirRequest, showDirections);  
        }
    }
})

我想打电话updateMap()关于用户操作。操作按钮不在指令上。

最好的通话方式是什么updateMap()来自控制器?


如果您想使用隔离范围,您可以使用双向绑定传递控制对象=来自控制器范围的变量。您还可以使用相同的控制对象控制页面上同一指令的多个实例。

angular.module('directiveControlDemo', [])

.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {};
})

.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;
      }
    }
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
  <div ng-controller="MainCtrl">
    <button ng-click="focusinControl.takeTablet()">Call directive function</button>
    <p>
      <b>In controller scope:</b>
      {{focusinControl}}
    </p>
    <p>
      <b>In directive scope:</b>
      <focusin control="focusinControl"></focusin>
    </p>
    <p>
      <b>Without control object:</b>
      <focusin></focusin>
    </p>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何调用 AngularJS 指令中定义的方法? 的相关文章

  • 将 bootstrap 迁移到 v4 - 弹出窗口不起作用

    我在将 Bootstrap 从版本 3 迁移到版本 4 时遇到问题 问题在于弹出窗口和 popper js 库 每次我将鼠标悬停在某个元素上时 都会收到此错误 未捕获的类型错误 无法读取未定义的属性 indexOf 在 v computeA
  • Angularjs 循环遍历 $http.post

    当我循环遍历 Angularjs 的 http post 服务时 for var i 0 i lt scope tagStyles length i scope profilTag tag scope tagStyles i id tag
  • AngularJS 不再在 Firebug 控制台中显示特定错误

    我在我的应用程序中使用 AngularJS 和 Angular Material 库 问题是 每当控制器的任何功能发生任何错误时 它都不会显示特定的错误 而是每次都会显示相同的一般错误 通过查看这些错误 您无法确定出了什么问题 这是我的控制
  • 通过外部控制进行 AngularJS 智能表过滤

    我试图找出合并 st table st safe src 的正确方法 并通过表本身之外的控件过滤数据 用户可以添加 编辑和删除数据 这就是我使用安全源的原因 任何例子或反馈都会很棒 查看此示例 其中包含从智能表中添加 编辑 删除行的选项 h
  • Angular 指令,属性更新时不调用链接

    在以下示例中 http plnkr co edit OZjg6sUgl35GIriaabQg p preview http plnkr co edit OZjg6sUgl35GIriaabQg p preview 我有 2 个指令 show
  • 如何将一个“模型”映射到两个字段?

    我有一个具有 高度 属性的模型 我希望允许用户将其编辑为两个单独的字段 英尺 和 英寸 但让它们映射到以英寸为单位测量的单个属性 高度 表格看起来像这样 在这些字段和单个 高度 属性之间创建双向绑定的最佳方法是什么 HTML
  • 在 Angular 中加载脚本和资源时实现加载器动画的最佳方法是什么?

    我希望向我的 Web 应用程序的用户显示一个进度条 指示加载所需文件和脚本的当前进度 最好显示百分比 但简单的加载器 gif 是一个可以接受的解决方案 如果可能的话 实现一个可以显示 Angular 中图像 CSS 和 JS 加载完成百分比
  • AngularJS工厂如何返回一个对象

    我有一个要求 我应该在其中编写工厂 这个工厂应该包含3个函数init save和delete 我应该从控制器调用 init 函数 该函数返回一个对象 该对象具有执行添加和删除功能的功能 我怎样才能做到这一点 以下是我的代码 它成功执行了 i
  • 在 AngularJS 中动态显示图像

    我正在使用http请求从数据库获取图像的路径 并且图像位于服务器中 我想在 img src 中显示该图像 这是代码 http url user profile exec php method GET params uid user id s
  • 如何从 URL 字符串中删除某些参数?

    我有这个var存储表示充满参数的 URL 的字符串 我正在使用 AngularJS 我不确定是否有任何有用的模块 或者可能使用纯 JavaScript 来删除不需要的 URL 参数而无需使用正则表达式 例如我需要删除 month 05并且
  • 使用 AngularJS 制作 Windows Phone 全景图

    我正在尝试在 AngularJS 应用程序中复制 Windows Phone Ui 这是一个example http www expertreviews co uk gallery features 1295629 designing wi
  • 通过隔离范围进行 AngularJS 基于事件的通信

    在 AngularJS 中 一个指令如何使用基于事件的通信 emit broadcast and on 与另一个具有隔离范围的指令进行通信 我创建了两个指令 当从第二个指令中删除隔离范围时 第一个指令能够使用emit 与第二个指令成功通信
  • 如何为 ng-repeat orderBy 创建回调?

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr
  • 监听指令中的表单提交事件

    我想监听指令中提交的表单 假设我有这样的指令 app directive myDirective function return restrict A require form scope smth link function scope
  • AngularJS 使用 PUT 上传图像,可能,如何?

    我正在尝试使用 AngularJS 通过 PUT 或 Post 请求上传图像 这可能吗 如果可以的话 下面如何不更改标头 仍然是 json 并且没有有效负载 这是我尝试过的 在我的控制器中 scope uploadFile function
  • 如何使用 AngularJS、Devise 和 UI Router 全局实现身份验证?

    我对 Angular 很陌生 所以这可能是一个新手问题 我正在尝试实现一个简单的任务管理器 只是一个练习 以 Rails 作为后端 以 Angular 作为前端 到目前为止 我遵循了教程 一切正常 现在我想在全球范围内实施身份验证 这意味着
  • 从 url 角度加载模板并在 div 内编译

    由于我是 Angular JS 的新手 我想知道如何加载外部模板并将其与一些数据一起编译到目标中div 例如我有这个模板
  • 使用 eclipse IDE 配置 angularjs

    我想开始使用 AngularJs 和 Java Spring 进行开发 我使用 Eclipse 作为 IDE 我想配置我的 Eclipse 以使这些框架无缝工作 我知道我可能要求太多 但相信我 我已经做了很多研究 你们是我最后的选择 任何帮
  • 让 prerender.io 与 Facebook 爬虫(maven、GAE)一起使用?

    我有一个 angularjs 应用程序 我想在 Facebook 上分享页面 这是通过元标签处理的 https developers facebook com docs sharing best practices https develo
  • UI Router 将 url 与 hash(片段)相匹配

    使用 UI 路由器 我需要将 URL 与其中包含的哈希 片段 进行匹配 HTML5 模式 state myState url path id page section templateUrl template html controller

随机推荐