CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Ankit Maheshwari
Ankit Maheshwari

Reputation: 1680

In angular, how to call a function defined inside a controller of directive?

Here is code:

Directive code: 

angular.module('app', ['localytics.directives', 'ngLoadScript'])
.directive("home", function() {
	return {
		restrict: "A",
		replace: true,
		template: "<div ng-include='var'>{{var}}</div>",
		controller: function($scope) {
			//loading home page - as default
			$scope.var = "/tfm/home.html"
			//on change the page changed dynamically!
			$scope.change = function(where) {
				$scope.var = where;
			}
		}
	}
})

I WANT TO CALL chanage(where) FUNCTION OF DIRECTIVE - DEFINED IN CONTROLLER OF DIRECTIVE.

Controller Code:

.controller('wToEatController', ['$scope', function($scope) {
	$scope.submitInfoAboutTable = function() {
		//validation for time selection
		if($scope.idealTableTime == undefined || $scope.rightTableTime == undefined) {
			return;
		}
		
		//Booking details to be updated - here users preference is updating!
		var bookingDetails = {
			idealTableWaitTime: $scope.idealTableTime,
			rightTableWaitTime: $scope.rightTableTime
		}
		
		//Let's update booking information - the booking key will be same used while login, public/tfm.html
		FirebaseDbService.updateBooking(function(isUpdated) {
			console.log(isUpdated);
			//I WANT TO CALL chanage(where) function of DIRECTIVE
			$scope.change = "change('/tfm/home.html')";
		}, bookingDetails, bookingKey);
	}	
}]);

Is it possible?

Upvotes: 1

Views: 231

Answers (1)

Stefan.B
Stefan.B

Reputation: 146

You have to create an attribute with which the link will be done (in this example customAttr): 

<span yourDirectiveName  customAttr="myFunctionLink(funcInDirective)"></span>

And into your directive controller just set the new attribute like in the following snippet( '&' two way data binding ) , and create a connection with your directive method : 

scope : {customAttr : '&'},
link : function(scope,element,attrs){

        scope.myDirectiveFunc = function(){
             console.log("my directive function was called");}
        }
        scope.customAttr({funcInDirective : scope.myDirectiveFunc});
}

And in your controller :

$scope.myFunctionLink = function(funcInDirective){
$scope.callableDirectiveFunc = funcInDirective;}

Now you can call your directive function with $scope.callableDirectiveFunc();

Upvotes: 2

Related Questions