Question

我是AngularJS的新手，我试图在MapController的getMyPosition（）函数中使用userLocation指令中的goToUserLocation（）函数。我想这样做的原因是，一旦用户点击我想要占据他的位置的按钮，放大到40并将其放在地图的中心。有人可以帮我这个吗？谢谢。以下是指令，控制器和指令使用的服务：

    (function ()
{
    'use strict';

    angular
        .module('app.map')
        .directive('userLocation', userLocation);

    function userLocation(geolocation)
    {
        return {

          restrict: "A",
          link: function(scope, element, attrs){

            var ctrl = scope['vm'];
            var goToUserLocation = UserLocationFactory();
            goToUserLocation(ctrl, geolocation, ctrl.defaultLocation );

          }

        };

    }

    //Factory to build goToUserLocation function with callbacks configuration
    function UserLocationFactory(cantGetLocation, notSupportedBrowser)
    {

      return goToUserLocation;

      //function to make the map go to user location
      function goToUserLocation(vm, geolocation, defaultLocation)
      {
        resolveErrorCallbacks();
        geolocation.goToUserLocation(success, cantGetLocation, notSupportedBrowser);

        function success(position)
        {
          var location = {
              lat: position.lat,
              lng: position.lng,
              zoom: 15
          };
          configureLatlng(location);
        }

        function configureLatlng(location)
        {
          vm.map = {
            center: location
          };
        }

        function resolveErrorCallbacks(){
          if( !cantGetLocation || !( typeof cantGetLocation  === "function" ) )
          {
            cantGetLocation = function()
            {
              configureLatlng(defaultLocation);
            };
          }

          if( !notSupportedBrowser || !( typeof notSupportedBrowser  === "function" ) )
          {
            notSupportedBrowser = function()
            {
              configureLatlng(defaultLocation);
            };
          }

        }

      }

    }





})();

这是控制器：

   (function ()
{
    'use strict';

    angular
        .module('app.map')
        .controller('MapController', MapController);

    /** @ngInject */

    function MapController($mdDialog, $mdSidenav, $animate, $timeout, $scope, $document, MapData,
                            leafletData, leafletMapEvents, api, prototypes, $window, appEnvService, geolocation) {

        var vm = this;
        vm.getMyPosition = getMyPosition;


    function getMyPosition(){
        console.log("Here is your location.");
    }

这是指令我们的服务：

    (function() {
  'use strict';

  angular
    .module('app.map')
    .service('geolocation', geolocation);

  function geolocation() {

    /*
      success - called when user location is successfully found
      cantGetLocation - called when the geolocation browser api find an error in retrieving user location
      notSupportedBrowser - callend when browser dont have support
    */
    this.goToUserLocation = function(success, cantGetLocation, notSupportedBrowser)
    {
      if (navigator.geolocation)
      {

        navigator.geolocation.getCurrentPosition(currentPosition, function() {
          cantGetLocation();
        });

      }
      else
      {
        // Browser doesn't support Geolocation
        notSupportedBrowser();
      }

      function currentPosition(position)
      {
        var pos =
        {
          lat: position.coords.latitude,
          lng: position.coords.longitude

        };
        success(pos);
      }

    };
  }

})();

Answer 1

要从控制器调用指令函数，您可以使用范围＆＃39; =＆＃39;将控制器中的对象绑定到指令。

<body ng-controller="MainCtrl">
  <div my-directive control="directiveControl"></div>
  <button ng-click="directiveControl.foo()">Call Directive Func</button>
  <p>{{directiveControl.fooCount}}</p>
</body>

然后

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


app.directive('myDirective', function factory() {
  return {
    restrict: 'A',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.directiveControl = scope.control ? scope.control : {};
      scope.directiveControl.fooCount=0;
      scope.directiveControl.foo = function() {
        scope.directiveControl.fooCount++;
      }
    }
  };
});

见这个例子：

https://plnkr.co/edit/21Fj8dvfN0WZ3s9OUApp?p=preview

和这个问题：

How to call a method defined in an AngularJS directive?

如何在控制器函数内使用指令中的函数？

1 个答案: