How to call a function from the directive?

Question

I have this controller:

 .controller('UserListEditorController', function ($scope) { $scope.status = { isopenFields: false, isopenFilters: false }; $scope.toggleDropdownFields = function($event) { $scope.status.isopenFields = !$scope.status.isopenFields; }; $scope.toggleDropdownFilters = function($event) { $scope.status.isopenFilters = !$scope.status.isopenFilters; }; })

And I have this directive:

.directive('myDraggable', ['$document', function($document) { return { link: function(scope, element, attr) { element.on('mousedown', function(event) { element.data('mousedown', true); }); element.on('focusin', function(event) { if (element.data('mousedown')) { Calling $scope.toggleDropdown } }); } }; }]);

How do I call a function that is in controllers $scope from the custom directive?

There is no need for it I guess. I just need to know what is a right way to call a function. Html can be just something simple like this: <div myDraggable></div> — Tachi
– Tachi, Commented Sep 8, 2015 at 12:07
@Tachi If directive is defined descendant of the controller you can use what K.Toress suggested. — Rahil Wazir
– Rahil Wazir, Commented Sep 8, 2015 at 12:13

Kalhan · Accepted Answer · 2015-09-08 12:18:03Z

You have create a directive type of shared scope so if you define a directive with shared scope you can directly access the properties of the ng-controller

just as,

scope.sayHello();

here is the DEMO

may be you have gone wrong with calling element.data.., in angular directive you can access the attribute you put to the element as attr.mousedown

Here is a good Series to Refer

Chrillewoodz · Accepted Answer · 2015-09-08 12:11:46Z

This is one way of doing it:

Markup:

<button ng-controller="SomeCtrl" my-directive call-me="callMeMaybe()">I just met you</button>

JS:

 var app = angular.module('myApp', []); app.directive('myDirective', function ($parse) { return { restrict: 'A', scope: true, link: function (scope, element, attrs) { element.bind('click', function (e) { scope.$apply(attrs.callMe); }); } }; }); function SomeCtrl($scope) { $scope.callMeMaybe = function () { alert('I just called you, maybe'); }; }

sahil gupta · Accepted Answer · 2015-09-08 12:18:42Z

You can use scope.toggleDropdownFields()if your directive scope is not isolated and if the directive is called inside the scope of the controller UserListEditorController.

Please refer

Html

<button ng-controller="MyCtrl" dir>I just met you</button>

Angular

var app = angular.module('plunker', []); app.directive('dir', function ($parse) { return { restrict: 'A', scope: true, link: function (scope, element, attrs) { element.bind('click', function (e) { scope.click(); }); } }; }); app.controller('MyCtrl',function($scope) { $scope.click = function () { console.log("Whatever you want to do"); }; });

Collectives™ on Stack Overflow

How to call a function from the directive?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related