ctrl in undefined in angular directive

Question

I try to create an angular directive which shows a complete list of countries,which I can reuse in my application.

The list is shown, I can prefill the value in the list based on the ng-model in html, but I can't get the selected value from the list. I get an error while I try to do an ctrl.$setViewValue to update the main scope.

This is the code which I currently have.

Directive

    prismanoteApp.directive('countryList', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            required: '=ngRequired',
            label: '@label'
        },
        templateUrl: '../views/directives/country-list.html',

        link : function(scope, element, attrs, ctrl){
            console.log("scope", scope, "ctrl",ctrl); //Here is ctrl undefined
            scope.countries = [{name: "Netherlands", code: "NL"}] //whole list of countries

            if(scope.ngModel){
                var index = _.findIndex(scope.countries, {code: scope.ngModel.toUpperCase()})
                if(index >= 0){
                    scope.country = scope.countries[index];
                }
            } 

            scope.updateCountry = function(selected){
                console.log("SELECTED", selected.code);

                ctrl.$setViewValue(selected);
                scope.country = selected
            }
        }
    };
});

Directive HTML

<div class="div">
    <label for="{{label}}">{{:: "TEXT_COUNTRY" | translate}} id="{{label}}" name="{{label}}"</label>
    <ui-select ng-model="country" ng-change="updateCountry($select.selected)" theme="bootstrap">
        <ui-select-match placeholder="{{:: 'SELECT_OR_SEARCH_COUNTRY' | translate}}">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="country in countries | filter: $select.search">
            <div ng-bind-html="country.name | highlight: $select.search">
        </ui-select-choices>
     </ui-select>
</div>

HTML

<div class="form-group">
    <div class="col-md-12 no-padding-left">
        <country-list ng-required="false" label="shopCountry" ng-change="getAddressInfo()" ng-model="currentShop.address.country"></country-list>
    </div>
</div>

Since ctrl is undefined, I can't call the $setViewValue() function, but how can I get this to work?

I already tried to several options which the scope variables, restrict to 'A', require in the directive.

You need require: 'ngModel' in your directive definition. See this post — kevin

Unknown Unknown · Accepted Answer · 2019-05-02T21:02:21

It's undefined because no controller is specified. Either it doesn't exist or isn't registered on the module. (Global controllers not allowed from 1.3+ see this SO answer.) If it's registered on another module then that module must be added as a dependency to the current module.

You need to define a controller on your module and specify it in your template with ng-controller or by using require in your directive to ask for a controller from a parent node:

return { restrict: 'E', require: 'someController' scope: { ...

AngularJS docs for link function:

controller [...] undefined if it doesn't have one.

ctrl in undefined in angular directive

1 Answers