Question

我尝试创建一个角度指令，该指令显示国家的完整列表，可以在我的应用程序中重复使用。

显示了列表，我可以基于html中的ng-model预填充列表中的值，但是我无法从列表中获取选定的值。尝试执行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+ see this SO answer.)起不允许使用全局控制器，如果已在另一个模块上注册，则必须将该模块作为对当前模块的依赖项添加。

您需要在模块上定义一个控制器，并在模板中使用ng-controller或在指令中使用require来指定它，以从父节点请求控制器：

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

AngularJS docs for link function:

控制器[...] 未定义的控制器。

角度指令中未定义的ctrl

1 个答案: