Access controller scope from directive

Question

I've created a simple directive that displays sort column headers for a <table> I'm creating.

ngGrid.directive("sortColumn", function() {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        scope: {
            sortby: "@",
            onsort: "="
        },
        template: "<span><a href='#' ng-click='sort()' ng-transclude></a></span>",
        link: function(scope, element, attrs) {
            scope.sort = function () {

                // I want to call CONTROLLER.onSort here, but how do I access the controller scope?...
                scope.controllerOnSort(scope.sortby);
            };
        }
    };
});

Here's an example of some table headers being created:

<table id="mainGrid" ng-controller="GridCtrl>
<thead>
    <tr>
        <th><sort-column sortby="Name">Name</sort-column></th>
        <th><sort-column sortby="DateCreated">Date Created</sort-column></th>
        <th>Hi</th>
    </tr>
</thead>

So when the sort column is clicked I want to fire the onControllerSort function on my grid controller.. but I'm stuck! So far the only way I've been able to do this is for each <sort-column>, add attributes for the "onSort" and reference those in the directive:

<sort-column onSort="controllerOnSort" sortby="Name">Name</sort-column>

But that's not very nice since I ALWAYS want to call controllerOnSort, so plumbing it in for every directive is a bit ugly. How can I do this within the directive without requiring unnecesary markup in my HTML? Both the directive and controller are defined within the same module if that helps.

Answer 1

The & local scope property allows the consumer of a directive to pass in a function that the directive can invoke.

See details here.

Here is a answer to a similar question, which shows how to pass argument in the callback function from the directive code.

Answer 2

Call me crazy, but it seems easier to just get the controller from the element via the inbuilt method for that, rather than fiddling with require:

var mod = angular.module('something', []).directive('myDir', 
  function () {
    return {
      link: function (scope, element) {
        console.log(element.controller('myDir'));
      },
      controller: function () {
        this.works = function () {};
      },
      scope: {}
    }
  }
);

http://plnkr.co/edit/gY4rP0?p=preview

Answer 3

In your directive require the ngController and modify the link function as:

ngGrid.directive("sortColumn", function() {
    return {
        ...
        require: "ngController",
        ...
        link: function(scope, element, attrs, ngCtrl) {
            ...
        }
    };
});

What you get as ngCtrl is your controller, GridCtrl. You dont get its scope though; you would have to do something in the lines of:

xxxx.controller("GridCtrl", function($scope, ...) {
    // add stuff to scope as usual
    $scope.xxxx = yyyy;

    // Define controller public API
    // NOTE: USING this NOT $scope
    this.controllerOnSort = function(...) { ... };
});

Call it from the link function simply as:

ngCtrl.controllerOnSort(...);

Do note that this require will get the first parent ngController. If there is another controller specified between GridCtrl and the directive, you will get that one.

A fiddle that demonstrates the principle (a directive accessing a parent ng-controller with methods): http://jsfiddle.net/NAfm5/1/

---

People fear that this solution may introduce unwanted tight coupling. If this is indeed a concern, it can be addressed as:

Create a directive that will be side-by-side with the controller, lets call it master:

<table id="mainGrid" ng-controller="GridCtrl" master="controllerOnSort()">

This directive references the desired method of the controller (thus: decoupling).

The child directive (sort-column in your case) requires the master directive:

require: "^master"

Using the $parse service the specified method can be called from a member method of the master controller. See updated fiddle implementing this principle: http://jsfiddle.net/NAfm5/3/

Answer 4

There is another way to do this, although given my relative lack of experience I can't speak for the fitness of such a solution. I will pass it along anyhow just for informational purposes.

In your column, you create a scope variable attribute:

<sort-column data-sortby="sortby">Date Created</sort-column>

Then in your controller you define the scope variable:

$scope.sortby = 'DateCreated' // just a default sort here

Then add your sort function in controller:

$scope.onSort = function(val) {
    $scope.sortby = val;
}

Then in your markup wire up ng-click:

<sort-column data-sortby="sortby" ng-click="onSort('DateCreated')">Date Created</sort-column>

Then in your directive you add the sortby attribute to directive scope:

scope: {
    sortby: '=' // not sure if you need
}

And in your "link:" function add a $watch:

scope.$watch('sortby', function () {
    ... your sort logic here ...
}

The beauty of this approach IMO is that your directive is decoupled completely, you don't need to call back to onSort from the directive because you don't really leave onSort in the controller during that part of the execution path.

If you needed to tell your controller to wait for the sort to finish you could define an event in the controller:

$scope.$on("_sortFinished", function(event, message){
   ..do something...  
});

Then in your directive simply emit the event then the process is done:

$scope.$emit('_sortFinished');

There's other ways to do that, and this kind of adds some tight-ish coupling because your controller has to listen for. and your directive has to emit a specific even... but that may not be an issue for you since they are closely related anyhow.

Answer 5

Create a second directive as a wrapper:

ngGrid.directive("columnwrapper", function() {
  return {
    restrict: "E",
    scope: {
      onsort: '='
    }
  };
});

Then you can just reference the function to call once in the outer directive:

<columnwrapper onsort="controllerOnSort">
  <sort-column sortby="Name">Name</sort-column>
  <sort-column sortby="DateCreated">Date Created</sort-column>
</columnwrapper>

In the "sortColumn" directive you can then call that referenced function by calling

scope.$parent.onsort();

See this fiddle for a working example: http://jsfiddle.net/wZrjQ/1/

Of course if you don't care about having hardcoded dependencies, you could also stay with one directive and just call the function on the parent scope (that would then be the controller in question) through

scope.$parent.controllerOnSort():

I have another fiddle showing this: http://jsfiddle.net/wZrjQ/2

This solution would have the same effect (with the same criticism in regard to hard-coupling) as the solution in the other answer (https://stackoverflow.com/a/19385937/2572897) but is at least somewhat easier than that solution. If you couple hard anyway, i don't think there is a point in referencing the controller as it would most likely be available at $scope.$parent all the time (but beware of other elements setting up a scope).

I would go for the first solution, though. It adds some little markup but solves the problem and maintains a clean separation. Also you could be sure that $scope.$parent matches the outer directive if you use the second directive as a direct wrapper.