角指令控制器“此”返回未定义

Question

我试图使用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应该返回构造函数。

如果有人对此感兴趣，这里有一些背景：

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

谢谢你的帮助

Answer 1

箭头函数(除了看起来很整洁)可以用上下文代替this。由于控制器也是在箭头函数中定义的，因此它将获得其父上下文为this。这是严格模式下的undefined。

使用

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

不要仅仅因为function允许这样做而用箭头替换所有的ES6。

Answer 2

在我开始研究我的代码和我发布的jsFiddle之间的差异之后，这个问题就变得非常简单了。

我使用的是babeljs，显然，当我为控制器() => {}使用箭头函数语法时，作用域发生了变化。

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

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