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

时间:2017-07-05 11:32:51

标签: angularjs angularjs-directive callback angularjs-controller

我有一个控制器功能,我不能在指令内调用它。我正在努力。还有什么我没有做的事吗?请告诉我。我在这里包含了我的代码。我搜索了许多地方,跟着很多答案,现在我被困在这个

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

您可以使用链接功能中的 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