angular 指令控制器 "this" 返回未定义

Question

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

我已经在其他项目中这样做了无数次，但对于我来说，我无法让它发挥作用...

指令控制器 this return 未定义，这在 return 中很难将方法传递给子指令...

这是我的父指令代码：

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 应该是 return 构造函数。

如果有人感兴趣，这里有一些背景信息：

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

感谢帮助

Answer 1

在我开始查看我的代码和我发布的 jsFiddle 之间的差异后，结果证明这个问题很容易解决。

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

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

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

Answer 2

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

使用

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

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

angular 指令控制器 "this" 返回未定义

angular directive controller "this" returning undefined

javascript

this

angularjs

angular-directive

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