CODEWITHSUNDEEP
angularjsusing-directives
Fadwa
Fadwa

Reputation: 51

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

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>

Upvotes: 3

Views: 3438

Answers (2)

Sukriti
Sukriti

Reputation: 51

$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

Upvotes: 2

Prajapati Vikas
Prajapati Vikas

Reputation: 300

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

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

Upvotes: 0

Related Questions