控制器功能指令内部未调用答案

【问题标题】：Controller Function Not called inside Directive控制器功能指令内部未调用
【发布时间】：2017-07-05 11:32:51
【问题描述】：

我有一个控制器函数，我不能在指令中调用它。我正在努力。还有什么我没有做的吗？请告诉我。我在这里包含了我的代码。我已经搜索了很多地方并遵循了很多答案，现在我被困在了这个

(function () {
  var app = angular.module("featureModule", ['ngRoute']);
//

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 autocomplete = new google.maps.places.Autocomplete(element[0], googleOptions);

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

				$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;
					}

					$scope.googleModel = {};
					$scope.googleModel.placeId = place.place_id;
					$scope.googleModel.latitude = place.geometry.location.lat();
					$scope.googleModel.longitude = place.geometry.location.lng();
					$scope.googleModel.formattedAddress = place.formatted_address;
					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)
					{ 
					//how to call controller function here?
						$scope.onSelect({ $item: $scope.googleModel });
				}
				});
			});
		}
	}

});


app.controller("featureController", function($scope,$http,$rootScope,close,ModalService,NgMap) {
console.log($rootScope.permService);

$scope.onSelect=function(val)
{
	
	console.log(val);
}

          
});

 <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>

【问题讨论】：

标签： angularjs angularjs-directive callback angularjs-controller

【解决方案1】：

控制器中没有 onSelectGoogleAddress() 函数。我只看到 onSelect() 函数。更改在 html 中传递的 on-select 值。

 <my-google-autocomplete id="address"  name="address" ng-model="task.house_no" google-model="model.googleAddress"
            on-select="onSelect($item)" autocomplete="off" required>
          </my-google-autocomplete>

【讨论】：

【解决方案2】：

您可以在 link 函数中使用 elemet 来绑定回调事件。

这是一个例子。希望对您有所帮助。

让控制器具有如下指令的回调函数

  app.controller('MainCtrl', function($scope) {
   $scope.SayHello=function(id){
        alert(id);
   }
 });

让指令

app.directive('dirDemo', function () {
    return {
    scope: {
        okCallback: '&'
    },
    template: '<input type="button" value="Click me" >',
        link: function (scope, element, attrs) {

    var param='from directive';

         element.bind('click', function () {
            scope.$apply(function () {
                scope.okCallback({id:param});
            });
        });
       }
      }
    });

HTML 是

 <body ng-controller="MainCtrl">
   <div dir-demo
        ok-callback="SayHello(id)"
   </div>
 </body>

打工仔https://plnkr.co/edit/RbFjFfqR1MDDa3Jwe8Gq?p=preview

【讨论】：