参见上面标记的答案^

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 fiddle表明指令控制器this应该返回构造函数。

如果有人有兴趣，可以参考以下内容：

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

感谢您的帮助

Answer 1

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

使用

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

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

Answer 2

在我开始查看我的代码和我发布的jsFiddle之间的差异之后，事情变得非常简单。

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

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

angular指令控制器“this”返回undefined

2 个答案:

参见上面标记的答案^