Accessing a function defined in a controller inside a custom directive in angularjs

Question

I'm a newbie to AngularJS. I'm following the controller as syntax when defining methods and properties. I just created a custom directive to display the search results of the people. I defined a method inside controller that is used in my custom directive search-result. How can i access the formattedAddress function inside my custom directive using controller as syntax.

app.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {

  $routeProvider
    .when('/', {
      templateUrl: 'pages/main.html',
      controller: 'mainController',
      controllerAs: 'main'
    })

  .when('/second', {
    templateUrl: 'pages/second.html',
    controller: 'secondController',
    controllerAs: 'second'
  })

  .when('/second/:num', {
    templateUrl: 'pages/second.html',
    controller: 'secondController',
    controllerAs: 'second'
  })

});

myApp.controller('mainController', ['$scope', '$log',
  function($scope, $log) {

    var self = this;

    self.people = [{
      name: 'John Doe',
      address: '555 Main St.',
      city: 'New York',
      state: 'NY',
      zip: '11111'
    }, {
      name: 'Jane Doe',
      address: '333 Second St.',
      city: 'Buffalo',
      state: 'NY',
      zip: '22222'
    }, {
      name: 'George Doe',
      address: '111 Third St.',
      city: 'Miami',
      state: 'FL',
      zip: '33333'
    }];

    self.formattedAddress = function(person) {

      return person.address + ', ' + person.city + ', ' + person.state + ' ' + person.zip;

    };

  }
]);

myApp.controller('secondController', ['$scope', '$log', '$routeParams',
  function($scope, $log, $routeParams) {



  }
]);

myApp.directive("searchResult", function() {
  return {
    restrict: 'EA',
    templateUrl: 'directives/searchresult.html',
    replace: true,
    scope: {
      personObject: "=",
      formattedAddressFunction: "&"
    }
  }
});

I'm not able to access to access person object inside formattedAddress.

main.html

<label>Search</label>
<input type="text" value="Doe" />

<h3>Search Results</h3>
<div class="list-group">
  <search-result person-object="main.person" formatted-address-function="main.formattedAddress(aperson)" ng-repeat="person in main.people"></search-result>
</div>

searchresult.html

<a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">{{ personObject.name }}</h4>
  <p class="list-group-item-text">
    {{ formattedAddressFunction({ aperson: personObject }) }}
  </p>
</a>

Answer 1

use ng-controller directive to reference your controller remove those references to main:

<label>Search</label>
<input type="text" value="Doe" />

<h3>Search Results</h3>
<div class="list-group" ng-controller="mainController">
  <search-result person-object="person" formatted-address-function="formattedAddress(aperson)" ng-repeat="person in people"></search-result>
</div>

set formattedAddress and person to $scope in your controller like this:

$scope.formattedAddress = function(person) {
  return person.address + ', ' + person.city + ', ' + person.state + ' ' + person.zip;
};

Answer 2

You should be using angular filters for this. A sample filter for limiting the letters of a word.

angular.module('app').filter('limitLetters', function() {
    /**
     * Limits the letters of the input string
     * @param value {string} the string to be limited
     * @param max {number} the max number of letters allowed
     */
    return function(value, max) {
        if (!value) return '';
        max = parseInt(max, 10);
        if (!max) return value;
        if (value.length <= max) return value;
        value = value.substr(0, max);
        return value + ' …';
    };
});