angular指令控制器"this"返回undefined

Question

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

我在其他项目中已经完成了这么多次,但对于我的生活,我无法让这个工作......

指令控制器this返回undefined,这反过来使得很难将方法传递给子指令...

这是我的父指令的代码:

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 router template是一个指令元素 <div default-header data="data"></div>
• ui路由器解析数据,然后通过控制器传递给指令

谢谢您的帮助

Answer 1

箭头功能(除了它们看起来整洁的事实)用于替换词汇this与上下文.由于控制器也是在箭头函数中定义的,因此它将获得其父上下文this.这是undefined严格的模式.

使用

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

并且不要function仅仅因为ES6允许这样而用箭头替换所有.