Link function in angular directive returning value

Question

I have a directive which is a dropdown of countries that I will resuse across an application. I've created a link function so I can return the data to a controller, which is binding to a view that uses the directive.

directive.js

myAppModule.directive('countryDropdown', ['genericService', function (genericService) {
        return {
            templateUrl: 'Scripts/app/templates/tmplCountryDropdown.html',
            restrict: 'E',
            scope: {
                "dirListOfCountries": "="
            },
            link: function () {
                $scope.selectedCountry = "";
                $scope.getCountries = function() {
                    genericService.doQuery("search", "countries").then(function (data) {
                        $scope.dirListOfCountries = data;
                    });
                }
            },
        }
    }]);

Reference to directive

<div class="form-group">
    <label for="country">Country:</label>
    <country-dropdown dir-list-of-countries="getCountries()"></country-dropdown>
</div>

controller.js

(function() {
    "use strict";
    var myAppModule = angular.module('myApp');

    myAppModule.controller('contactsearchController', [
         '$scope', '$state', '$stateParams', 'genericService', 'sessionData', 'localStorageService',
        function ($scope, $state, $stateParams, genericService, sessionData, localStorageService) {

            $scope.memberSearch = function (type) {
                genericService.doQueryByObj("search", type, null, null, {
                    ContactId: $stateParams.searchParam,
                    Postcode: $stateParams.searchParam,
                    EndUserNetworkLoginName: 'RHSNET\\nickgowdy',
                    // RowStart and RowEnd needed or query won't return data :(
                    RowStart: 1,
                    RowEnd: 32
                }).then(function (data) {
                    $scope.memberData = data;
                });
            }

            $scope.getCountries = function(valFromDirective) {
                console.log(valFromDirective);
            }

        }
    ]);
})();

At this moment in time I have this error in my directive, it says $scope is undefined.

ReferenceError: $scope is not defined
    at link (http://localhost:60541/Scripts/app/directives/directives.js:27:17)
    at http://localhost:60541/Scripts/angular.js:8644:44
    at invokeLinkFn (http://localhost:60541/Scripts/angular.js:8650:9)
    at nodeLinkFn (http://localhost:60541/Scripts/angular.js:8150:11)
    at http://localhost:60541/Scripts/angular.js:8380:13
    at processQueue (http://localhost:60541/Scripts/angular.js:14567:28)
    at http://localhost:60541/Scripts/angular.js:14583:27
    at Scope.$get.Scope.$eval (http://localhost:60541/Scripts/angular.js:15846:28)
    at Scope.$get.Scope.$digest (http://localhost:60541/Scripts/angular.js:15657:31)
    at Scope.$get.Scope.$apply (http://localhost:60541/Scripts/angular.js:15951:24) <country-dropdown dir-list-of-countries="getCountries()" class="ng-isolate-scope">(anonymous function) @ angular.js:12330$get @ angular.js:9109invokeLinkFn @ angular.js:8652nodeLinkFn @ angular.js:8150(anonymous function) @ angular.js:8380processQueue @ angular.js:14567(anonymous function) @ angular.js:14583$get.Scope.$eval @ angular.js:15846$get.Scope.$digest @ angular.js:15657$get.Scope.$apply @ angular.js:15951done @ angular.js:10364completeRequest @ angular.js:10536requestLoaded @ angular.js:10477

I want to fix that error and have it so my controller has access to my directive value.

Answer 1

For starters:

link: function(scope, elem, attrs) {
    scope.getCountries ....
}

link functions in angular directives have set parameters, you can name them whatever you want and they'll always be the same:

link: function(crap, shoot, stall, monkey) {
    // crap === scope
    // shoot === element (current element)
    // stall === attributes (of the current element)
    // monkey === controller you might inject into the directive, like if you are inheriting another directives controller for example.

}

Just for clarification purposes, the usual naming convention is (scope, elem, attrs, ctrlName)

The other part of you code that is wrong is how you are passing the function. In the directive it should look like:

scope: {
            "dirListOfCountries": "&"
        },

in your link function:

scope.getCountries = function() {
                genericService.doQuery("search", "countries").then(function (data) {
                    scope.dirListOfCountries({data: data})
                });
            }

then in your html you would want:

<country-dropdown dir-list-of-countries="getCountries(data)"></country-dropdown>

I think that should get you closer.

Answer 2

You need inject $scope in directive like this

    link: function ($scope) {
        $scope.selectedCountry = "";
        $scope.getCountries = function() {
            genericService.doQuery("search", "countries").then(function (data) {
                $scope.dirListOfCountries = data;
            });
        }
    },