如何在指令中正确调用控制器函数?

时间:2017-07-05 09:44:02

标签: angularjs function angularjs-directive angular-directive

我在html页面中使用了一个控制器印象的指令。我需要从该指令调用一个控制器函数,但我无法正确地执行此操作。每次都有一些错误。有谁能够帮我 ?请 :( 下面是代码。

app.directive('myGoogleAutocomplete', function () {
    return {
        replace: true,
        require: 'ngModel',
        scope: {
            ngModel: '=',
            googleModel: '=',
            onSelect: '&?', // optional callback on selected successfully: 'onPostedBid(googleModel)'
        },
        template: '<input class="form-control" type="text" style="z-index: 100000;" autocomplete="on">',
        link: function ($scope, element, attrs, model) {
            var googleOptions = {
                types: ['address'] // change or empty it, if you want no restrictions
            };

            var autocomplete = new google.maps.places.Autocomplete(element[0], googleOptions);

            google.maps.event.addListener(autocomplete, 'place_changed', function () {


                /**
                 * Search gor the passed 'type' of info into the google place component
                 * @param {type} components
                 * @param {type} type
                 * @returns {type} 
                 */
                $scope.extract = function (components, type) {
                    for (var i = 0; i < components.length; i++)
                        for (var j = 0; j < components[i].types.length; j++)
                            if (components[i].types[j] == type) return components[i].short_name;
                    return '';
                };


                $scope.$apply(function () {
                    var place = autocomplete.getPlace();
                    if (!place.geometry)
                     {
                        // User entered the name of a Place that was not suggested and pressed the Enter key, or the Place Details request failed.
                        model.$setValidity('place', false);
                        //console.log("No details available for input: '" + place.name + "'");
                        return;
                    }


                    console.log($scope.googleModel.longitude);

                    console.log($scope.googleModel.latitude);
      $scope.thisFunct(); //want to call controller func here

                    if (place.address_components) {
                        $scope.googleModel.address = [
                            $scope.extract(place.address_components, 'route'),
                            $scope.extract(place.address_components, 'street_number')
                        ].join(' ');

                    }

                    model.$setViewValue(element.val());
                    model.$setValidity('place', true);
                    if (attrs.onSelect) $scope.onSelect({ $item: $scope.googleModel });
                });
            });
        }
    }
});

//
app.controller("featureController", function($scope,$http,$rootScope,close,ModalService,NgMap) {
        $scope.thisFunct=function()
        {
            console.log("Reached Here finally! Success ");
        }
  <my-google-autocomplete id="address"   name="address"
      ng-model="task.house_no" google-model="model.googleAddress"
      on-select="vm.onSelectGoogleAddress($item)" autocomplete="off"
      required>
  </my-google-autocomplete>

1 个答案:

答案 0 :(得分:-1)

在指令范围内,调用函数:

<div my-directive callback-fn="ctrlFn(arg1)"></div>


 app.directive('myDirective', function() {
    return {
        scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.someCtrlFn({arg1: 22});
        },
    }
});


 function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}