【问题标题】：angular directive controller "this" returning undefined角度指令控制器“this”返回未定义
【发布时间】：2026-02-17 00:25:01
【问题描述】：

我正在尝试使用 require 连接两个指令并共享父控制器。

我在其他项目中已经完成了无数次，但对于我的一生，我无法让它工作......

指令控制器this 正在返回未定义，这反过来会导致难以将方法传递给子指令...

这是我的父指令代码：

app.directive('defaultHeader', () => {

    let defaultHeaderCtrl = ($scope, $element) => {

        let containEl,
            elHeight = 500;

        console.log(this) // returns 'undefined'

        function resizeElement(el, height) {
            el[0].style.height = `${height}px`
        }

        if (_.isUndefined($scope.coverImgUrl)) {
            resizeElement($element, elHeight);
        } else {

        }
    };

    return {
        restrict: 'A',
        scope: {
            coverImgUrl: '='
        },
        controller: defaultHeaderCtrl
    };
});

This fiddle 表明指令控制器this 应该返回构造函数。

如果有人感兴趣，这里有一些上下文：

ui路由模板是指令元素<div default-header data="data"></div>
ui 路由器解析数据，然后通过控制器将其传递给指令

感谢您的帮助

【问题讨论】：

在指令代码中限制“A”，但在您的模板中，您将指令用作元素。
感谢@FidanHakaj - 这只是示例代码，但我对其进行了修复以更好地代表实际指令
我打开了你的小提琴，它正在记录Constructor {}，而不是未定义
@MarioLamacchia - 确切地说 - 小提琴表明它应该返回构造函数，而我在项目中的指令不是

标签： javascript angularjs this angular-directive

【解决方案1】：

箭头函数（除了它们看起来很整洁）用于将lexical this 替换为上下文。由于控制器也是在箭头函数中定义的，因此它将其父上下文作为this。在严格模式下是undefined。

使用

function defaultHeaderCtrl ($scope, $element) { ... }

不要仅仅因为 ES6 允许就用箭头替换所有 function。

【讨论】：

绝对正确：“不要仅仅因为 ES6 允许就用箭头替换所有 function”
完美答案 - 将我的答案改为指向你的答案 - 我隐约记得在深入了解 babel 编译器时阅读过有关 this 的词汇 - 我想我需要重新审视一下 :)
是的，这是旧 var self = this 模式的相当优雅的替代品。

【解决方案2】：

在我开始查看我的代码和我发布的 jsFiddle 之间的差异之后，这变得非常容易解决。

我正在使用 babeljs，显然当我为控制器 () => {} 使用箭头函数语法时，范围发生了一些事情。

将其切换回function() {} 后，this 现在返回构造函数，并且指令按预期工作。

有关上下文，请参阅上面标记的答案 ^

【讨论】：