how to call a controller function from ng-click directive?

Question

I have two directives and a controller, the problem is that i can't call a function 'addMarkers()' of the controller from my directive .

i have the following codes:

derectives.js

app .directive('collection', function () { var tpl = '<ul><member ng-repeat="member in collection" member="member"></member></ul>'; return { restrict: "E", replace: true, scope: { collection: '=' }, template: tpl } }) app .directive('member', function ($compile) { var tpl = '<li><a ng-click="addMarkers(member)" >{{member.title}}</a>'+ '<input class="align" ng-if="!member.children" type="checkbox" ng-checked="true"/></li>'; return { restrict: "E", replace: true, scope: { member: '=' }, template: tpl, link: function (scope, element, attrs) { if (angular.isArray(scope.member.children)) { element.append("<collection collection='member.children'></collection>"); $compile(element.contents())(scope) } } } })

controller.js

app .controller('IndexCtrl', function($scope, itemProvider){ itemProvider.getItems().success(function(data){ $scope.items = data; }); $scope.addMarkers = function(item){ alert("Helloo"); $scope.markers = itemProvider.addMarkers(); } });

index.html

<div id="menu" ng-controller="IndexCtrl">	<nav>	<h2><i class="fa fa-reorder"></i>All Categories</h2>	<collection collection='items'></collection>	</nav> </div>

Since your directives are creating isolated scopes, the parent scope method addMarker is not available. You can pass it as parameter to directive definition object, in the scope property with & binding. — Chandermani
– Chandermani, Commented May 12, 2015 at 10:12

Sukriti · Accepted Answer · 2015-05-13 07:18:02Z

$rootScope is the global scope which should be used only when required. It should be kept as clean as possible to avoid pollution of scope variables.

In order to access parent method from isolated scope you can use $parent service, as shown below:

scope.$parent.addMarkers();

example: basic example

In your case, The directive that wants to access the parent is again called from inside another directive,hence for such cases you can use $parent.$parent,

scope.$parent.$parent.addMarkers(); as shown in the following:

example:example for your case

This can be done if the number of directives using the parent scope is limited. If the hierarchy is long, then using multiple $parent makes the code clumsy. In those cases, it is preferable to add the parent method inside a service and call the service itself from the directives.

Example: service example

Prajapati Vikas · Accepted Answer · 2015-05-12 11:13:16Z

I should use $rootScope instead of $scope like below,

$rootScope.addMarkers = function(item){ alert("Helloo"); $scope.markers = itemProvider.addMarkers(); }

Collectives™ on Stack Overflow

how to call a controller function from ng-click directive?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related