Question

以下是代码：

function link(scope, element, attrs, formCtrl) {
    element.tooltipster({
        content: '',
        theme: 'validation-notify',
        arrowColor: '#d9534f',
        contentAsHTML: true,
        functionBefore: generateContent
    });
}

function generateContent() {
    var formField = formCtrl[element];
    var i = 0;
}

上面的代码被破坏了，因为generateContent中的formCtrl和element不可用。现在，我意识到我可以使用：

functionBefore: generateContent.bind({formCtrl: formCtrl, element: element})

然后在generateContent我可以通过

引用它们

this.element

我也可以在链接中声明generateContent。有没有更好的方法呢？就像在任何情况下将generateContent绑定到链接中的整个上下文一样，例如：

functionBefore: generateContent.bind(this)

（除非在这种情况下this未定义）？

Answer 1

无论如何将generateContent绑定到链接
中的整个上下文

不，这些函数是词法范围的，它们会记住创建它们的环境。我们无法访问这些信息，因为它们是特定于实现的。

但你可以做的是，让generateContent函数接受它需要的所有参数，你可以定义functionBefore，就像这样

...
functionBefore: generateContent.bind(this, formCtrl, element)
...

function generateContent(formCtrl, element) {
    var formField = formCtrl[element];
    var i = 0;
}

在这里，generateContent.bind(this, formCtrl, element)创建一个新的函数对象，在调用时，它将具有link函数的this和两个参数formCtrl和element的上下文默认情况下。

Answer 2

另一种方法是使generateContent成为函数工厂

function link(scope, element, attrs, formCtrl) {
        element.tooltipster({
            content: '',
            theme: 'validation-notify',
            arrowColor: '#d9534f',
            contentAsHTML: true,
            functionBefore: generateContent(fromCtrl, element) // pass here
        });
    }

function generateContent(fromCtrl, element) {
    return function() { // return a new function
        // use fromCtrl and element and do real work here
        var formField = formCtrl[element];
        var i = 0;
    }
}

将上下文传递给内部函数

2 个答案: