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

Question

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

.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()从控制器呼叫的最佳方法是什么？

Answer 1

如果要使用隔离作用域，则可以使用=来自控制器作用域的变量的双向绑定来传递控制对象。您还可以在页面上使用相同的控件对象来控制同一指令的多个实例。

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>