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

发布时间：2020-12-17 09:34:31 所属栏目：安全来源：网络整理

导读：我有一个指令，这里是代码： .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

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

.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',template: '<div>A:{{internalControl}}</div>',scope: {
      control: '='
    },link: function(scope,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!