title: AngularJS: Multiple ways to pass function from controller to directive
body: <p>I am trying to write component-style AngularJS, similar to the practice put forward by this <a href="http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html" rel="nofollow noreferrer">article</a>.</p>
  
  <p>However, I have come to realize there are various ways to pass functions to directives from an associated controller. The directive I'm working on is quite complex and I was passing each function in by binding to the directive in the template, but I now see I could just implicitly inherit the <code>$scope</code> object or reference the <code>Controller</code> object directly.</p>
  
  <p>Here is an example of what I mean:</p>
  
  <p><em>app.js</em></p>
  
  <pre><code>var app = angular.module('plunker', [])
  
  app
  
    .controller('myCtrl', function($scope) {
      $scope.output = '';
      // fn foo is passed into directive as an argument
      $scope.foo = function () {
        $scope.output = 'foo';
      }
      // fn inherited from controller
      $scope.bar = function () {
        $scope.output = 'bar';
      }
      // fn attached to ctrl object and referenced directly
      this.baz = function () {
        $scope.output = 'baz';
      }
  
    })
  
    .directive('myDirective', function() {
      return {
        scope: {
          output: '=',
          foo: '&amp;',
        },
        templateUrl: 'template.html',
        replace: true,
        controller: 'myCtrl',
        controllerAs: 'ctrl'
      };
    }) 
  </code></pre>
  
  <p><em>index.html</em></p>
  
  <pre><code>&lt;body ng-controller="myCtrl"&gt;
    &lt;my-directive
      output="output"
      foo="foo()"&gt;
    &lt;/my-directive&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><em>template.html</em></p>
  
  <pre><code>&lt;div&gt;
    &lt;button ng-click="foo()"&gt;Click Foo&lt;/button&gt;
    &lt;button ng-click="bar()"&gt;Click Bar&lt;/button&gt;
    &lt;button ng-click="ctrl.baz()"&gt;Click Baz&lt;/button&gt;
    &lt;p&gt;You clicked: &lt;span style="color:red"&gt;{{output}}&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Plunkr: <a href="http://plnkr.co/edit/1JzakaxL3D2L6wpPXz3v?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/1JzakaxL3D2L6wpPXz3v?p=preview</a></p>
  
  <p>So there are three functions here and they all work, yet are passed to the directive in different ways. My question is what are the merits of each and which is the best from a code and testability perspective?</p>