Angular: creating a custom directive that can call a scope function

Question

I want to create a custom directive (let's call it MyDragSource) that can obtain its "drag context" by calling a function on the scope, like so:

<div my-drag-source drag-context="getDragContext">

In this case, getDragContext is a function that's defined on the scope:

$scope.getDragContext = function() { // return drag source }

I want getDragContext to be lazily invoked when the drag operation begins, not evaluated up front. How can I do this?

In my custom directive, I've tried the following:

$scope.$eval($attrs.dragContext);

However, that doesn't yield the desired result.

it's not going to be invoked until you actually execute it with () — Claies
– Claies, Commented Feb 17, 2015 at 1:18
can you show the code of the directive? right now you are assigning a property to a function, not the result of the function, but you appear to be trying to evaluate the variable inside the directive like it's outside on the scope.... — Claies
– Claies, Commented Feb 17, 2015 at 1:20

aarosil · Accepted Answer · 2015-02-17 02:38:46Z

2

Pass the function as an attribute on your directive:

<div my-drag-source drag-context="getDragContext()" >

Use isolate scope in your directive, and import dragContext using &, which defines the scope property as a function that returns the results of evaluating the attribute's contents in the parent scope (in this case, $scope.$parent.$eval(attrs.dragContext)):

scope: {
  dragContext: '&'
}

Then you can call the function whenever you want in link function:

$scope.dragContext()

If you pass the method without parentheses, you can still call it from the link function, you just need to invoke the function, by adding another set of parens:

$scope.dragContext()()

edited Feb 17, 2015 at 2:38

answered Feb 17, 2015 at 1:23

aarosil

4,8983 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Wolf Over a year ago

Excellent, thanks so much! Just one minor correction: on the scope definition above, you need "dragContext:" rather than "drag-context:"

Diadistis Over a year ago

@Wolf Just be sure that you understand what the scope isolation does in this solution.

Joe Enzminger Over a year ago

Just for correctness, & does not indicate a reference to an external function. It is just shorthand for adding a function dragContext to the directive scope that returns $scope.$parent.$eval(atts.dragContext). The expression attrs.dragContext can be any valid angular expression, not just a method invocation or method.

aarosil Over a year ago

@JoeEnzminger thank you for providing this additional information, I will update

Diadistis · Accepted Answer · 2015-02-17 01:31:28Z

0

You can call it like this :

var data = $scope[$attrs.dragContext]();

Example

edited Feb 17, 2015 at 1:31

answered Feb 17, 2015 at 1:22

Diadistis

12.2k1 gold badge35 silver badges57 bronze badges

Collectives™ on Stack Overflow

Angular: creating a custom directive that can call a scope function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related