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

Posted 2023-02-22

【中文标题】如何在指令中正确调用控制器函数？

【英文标题】：How to correctly call a controller function with in a directive?

【发布时间】：2017-12-08 21:46:31

【问题描述】：

我在我的 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>

【问题讨论】：

ans。已删除 rahi.shah

当询问由您的代码引起的问题时，如果您提供人们可以用来重现问题的代码，您将获得更好的答案。尽可能少地使用仍然会产生相同问题的代码。见How to create a Minimal, Complete, and Verifiable example。

代码$scope.onSelect( $item: $scope.googleModel )正确调用了函数。请澄清您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

【参考方案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);