Search code examples
angularjsangularjs-directivecallbackangularjs-controller

Controller Function Not called inside Directive


I have a controller function and I cannot call it inside the directive. I am trying hard. is there any thing Else i am failing to do? please tell me. I have included my code here. I have searched many places followed many answers and now I am stuck at this

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


Solution

  • There is no onSelectGoogleAddress() function in the controller. I see only onSelect() function. Change on-select value passed in the html.

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