javascript - Angular Directive(指令) Controller "this"返回未定义

Question

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

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

指令 Controller 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显示指令 Controller this应该返回构造函数。

如果有人感兴趣，这里有一些背景:

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

感谢帮助

Answer 1

箭头函数(除了它们看起来整洁之外)用于替换 lexical this与上下文。由于 Controller 也是在箭头函数中定义的，因此它将获得其父上下文作为 this。在严格模式下是 undefined。

使用

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

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