如何调用 AngularJS 指令中定义的方法? [英] How to call a method defined in an AngularJS directive?

问题描述

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

.directive('map', function() {返回 {限制:'E'，替换:真的，模板:'<div></div>',链接:函数($scope，元素，属性){var center = new google.maps.LatLng(50.1, 14.4);$scope.map_options = {缩放:14，中心:中心，mapTypeId: google.maps.MapTypeId.ROADMAP};//创建地图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) {如果(dirStatus ！= google.maps.DirectionsStatus.OK){alert('方向失败:' + dirStatus);返回;}//显示方向dirRenderer.setMap(map);//$scope.dirRenderer.setPanel(Demo.dirContainer);dirRenderer.setDirections(dirResult);};//手表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', 函数工厂() {返回 {限制:'E'，替换:真的，模板:'<div>A:{{internalControl}}</div>',范围: {控制:'='},链接:函数(范围，元素，属性){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()">调用指令函数</button><p><b>在控制器范围内:</b>{{focusinControl}}</p><p><b>在指令范围内:</b><focusin control="focusinControl"></focusin></p><p><b>没有控制对象:</b><focusin></focusin></p>

I have a directive, here is the code :

.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);  
        }
    }
})

I would like to call updateMap() on a user action. The action button is not on the directive.

What is the best way to call updateMap() from a controller?

解决方案

If you want to use isolated scopes you can pass a control object using bi-directional binding = of a variable from the controller scope. You can also control also several instances of the same directive on a page with the same control object.

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>

这篇关于如何调用 AngularJS 指令中定义的方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！