Passing a controller to a directive - AngularJS

Question

I have a simple scenario which i'm trying to figure out.

I have a controller (which is bounded to a dialog). The controller looks like that:

app.controller('fullCtrl', function ($scope, $dialog, $http, $log, apiService, stateService, promiseData, dialog, leaf, CONST) {
...
}

one of the ui elements on the dialog is a canvas that is being rendered using a directive:

<div leaf-graph structure=structure></div>
app.directive('leafGraph', ['$timeout',  function (timer, $log) {
...
}

The issue is that i'm looking for a way for the directive to interact with the controller, so when a user click on the directive, the controller rebinds itself to a new data.

Basically, its all done in the javascript side, where the user double click on some areas on the canvas, its should trigger some actions on the controller.

is there any way to pass the controller to the directive?

Thx

Do you need to pass the controller to the directive, or is it sufficient for the directive to call a method on the controller? Also, does the directive create a new scope, an isolate scope, or no new scope? — Mark Rajcok
– Mark Rajcok, Commented Apr 22, 2013 at 22:31

Sharondio · Accepted Answer · 2013-04-22 21:42:24Z

2

You already have access to $scope in the directive, including any controller functions you define within that scope. Here is an example: Egghead.io - Directives Talking to Controllers

answered Apr 22, 2013 at 21:42

Sharondio

2,61415 silver badges16 bronze badges

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

Comments

Joseph Oster · Accepted Answer · 2013-04-23 01:12:20Z

It's worth noting that a directive using $apply within a ng-repeat loop causes "Error: $digest already in progress".

At least two other methods seem to work instead, without generating that error.

this one allows passing parameters to the named function:

scope.$eval(attrs.repeatDone);

usage:

<div ng-repeat="feed in feedList" repeat-done="layoutDone($index)"> or
<div ng-repeat="feed in feedList" repeat-done="layoutDone()">

this one requires function name only, no "()" or passing parameters:

scope[attrs.repeatDone]();

usage:

<div ng-repeat="feed in feedList" repeat-done="layoutDone">

the directive:

.directive('onEnter', function() {
    return function(scope, element, attrs) {
        element.on('keydown', function(event) {
            if (event.which === 13) {
                scope.$eval(attrs.onEnter);
            }
        })
    }
})

Collectives™ on Stack Overflow

Passing a controller to a directive - AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related