Ctrl в неопределенном в угловой директиве

Question

Я пытаюсь создать угловую директиву, которая показывает полный список стран, которые я могу использовать в своем приложении.

Показан список, я могу предварительно заполнить значение в списке на основе ng-модели в html, но не могу получить выбранное значение из списка. Я получаю сообщение об ошибке при попытке выполнить ctrl.$setViewValue для обновления основной области.

Это код, который у меня сейчас есть.

Директива

    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
            }
        }
    };
});

Директива 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>

Поскольку ctrl не определен, я не могу вызвать функцию $ setViewValue (), но как мне заставить это работать?

Я уже пробовал несколько вариантов, которые переменные области видимости, ограничивающие 'A', требуют в директиве.

Answer 1

Это undefined, потому что контроллер не указан. Либо он не существует, либо не зарегистрирован в модуле. (Глобальные контроллеры не разрешены с версии 1.3+ , см. Этот ответ SO.) Если он зарегистрирован в другом модуле, этот модуль должен быть добавлен в качестве зависимости от текущего модуля.

Вам необходимо определить контроллер в вашем модуле и указать его в своем шаблоне с помощью ng-controller или с помощью require в своей директиве, чтобы запросить контроллер у родительского узла:

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

Документы AngularJS для функции связи:

контроллер [...] неопределен, если у него его нет.