AngularJS：链接函数没有被传递给控制器答案

【问题标题】：AngularJS: link function is not being passed a ControllerAngularJS：链接函数没有被传递给控制器
【发布时间】：2023-04-03 18:11:01
【问题描述】：

我正在尝试创建一个指令：

     return {
            restrict: 'A', // Attribute Directive
            ngModel: '^ngModel',
            scope: {
                'ngModel': '='
            },
            link: function ($scope: ng.IScope, element, attrs, ctrl) {

                var datePickerOptions = {
                    autoclose: true,
                    format: attrs.aceDatepickerFormat,
                    weekStart: attrs.aceDatepickerWeekstart
                };

                // Attach the datepicker events (must have Bootstrap.DatePicker referenced).
                element.datepicker(datePickerOptions).next().on('click', function () {
                    $(this).prev().focus();
                });

                element.click(() => {
                    ctrl.$setViewValue(new Date());
                });
            }
        };

在这个例子中，当元素发生点击事件时，我希望使用 ctrl.$setViewValue 到当前日期（这是一个测试）。

调用链接函数时，范围、元素和atts都正确填充，但是ctrl为空。

该元素带有一个设置了 ng-controller 的 div。

<div ng-controller="Controllers.FormElementsController">
    <input class="form-control date-picker" id="id-date-picker-1" type="text"
           ng-model="DatePickerValue"
           ace-datepicker-weekstart="1"
           ace-datepicker-format="dd-mm-yyyy"
           ace-datepicker="" />

</div>

为什么这里没有传递控制器？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您必须使用require 拉入控制器（在您的情况下为ngModelController）：

return {
            restrict: 'A', // Attribute Directive
            require: '^ngModel',

您已将其设置为 ngModel 作为属性名称。

来自the docs：

myPane 指令有一个值为 ^myTabs 的 require 选项。当一个指令使用此选项，$compile 将抛出错误，除非找到指定的控制器。 ^ 前缀表示该指令在其父控制器上搜索控制器（不带 ^ 前缀，指令只会在它自己的元素上查找控制器）。

【讨论】：