Javascript 如何通过角度'；s指令'；s链接和控制器到它

假设我有一个直接的指令：

angular
    .module('myApp')
    .directive('myDiv', ['MyService1', 'MyService2', 
        function(MyService1, MyService2) {
            return {
                restrict: 'E',
                link: function(scope, element, attrs) {
                    scope.myVars = MyService1.generateSomeList();

                    MyService2.runSomeCommands();

                    // Do a lot more codes here
                    // Lines and Lines

                    // Now run some embedded function here
                    someEmbeddedFunction();

                    function someEmbeddedFunction()
                    {
                        // More embedding
                        // This code is really getting nasty
                    }
                }
            }
        }
    ]);

上面的代码有如此多的缩进和拥挤，至少对我来说，阅读起来非常困难，使用起来也不愉快

相反，我想将

链接

和

someEmbeddedFunction

移出并调用它们。因此，大致如下：

function link(scope, element, attrs, MyService1, MyService2)
{
    scope.myVars = MyService1.generateSomeList();

    MyService2.runSomeCommands();

    // Do a lot more codes here
    // Lines and Lines

    // Now run some embedded function here
    someEmbeddedFunction();
}

function someEmbeddedFunction()
{
    // This is much nicer and less tabbing involved
}

angular
    .module('myApp')
    .directive('myDiv', ['MyService1', 'MyService2', 
        function(MyService1, MyService2) {
            return {
                restrict: 'E',
                link: link          // This is line that I need to get it to work
            }
    ]);

问题是

MyService1

和

MyService2

没有传递给link函数（即，如果我只有一个带有

scope、element、attrs

的link函数，那么上面的代码就可以正常工作）。我怎样才能传递这些变量呢

我试图将函数调用为

link:link（scope，element，attrs，MyService1，MyService2）

，但它说

scope，element，attrs

未定义

注意我意识到

someEmbeddedFunction

现在可以毫无问题地移出。这只是为了演示

编辑

我能想到的唯一方法是通过以下方式从指令中调用

链接

函数：

link: function(scope, element, attrs) { 
    link(scope, element, attrs, MyService1, MyService2);
}

---

正如您所观察到的，调用非标准链接函数的唯一方法是在“标准”链接函数中手动执行

i、 e

这是因为链接函数不像Angular中的其他函数那样被注入。相反，它总是获得相同的一系列参数（无论您如何调用函数参数）：

范围

元素（作为

angular.element（）

实例）

attrs

对象

需要的阵列或单个控制器实例

d

转置函数（如果指令使用转置）

---

没有其他功能。

正如您所观察到的，调用非标准链接函数的唯一方法是在“标准”链接函数中手动执行

i、 e

这是因为链接函数不像Angular中的其他函数那样被注入。相反，它总是获得相同的一系列参数（无论您如何调用函数参数）：

范围

元素（作为

angular.element（）

实例）

attrs

对象

需要的阵列或单个控制器实例

d

转置函数（如果指令使用转置）

---

没有其他内容。

我使用此方案使其简单易读：

var awesomeDir = function (MyService, MyAnotherService) {

    var someEmbeddedFunction = function () {
        MyService.doStuff();
    };

    var link = function ($scope, $elem, $attrs) {
        someEmbeddedFunction();
    };

    return {
        template: '<div>...</div>',
        replace: true,
        restrict: 'E',
        link: link
    };

};

awesomeDir.$inject = ['MyService', 'MyAnotherService'];

app.directive('awesomeDir', awesomeDir);

var awesomeDir=function（MyService，MyAnotherService）{
var someEmbeddedFunction=函数（）{
MyService.doStuff（）；
};
变量链接=函数（$scope、$elem、$attrs）{
someEmbeddedFunction（）；
};
返回{
模板：“…”，
替换：正确，
限制：'E'，
链接：链接
};
};
awesomeDir.$inject=['MyService'，'MyAnotherService']；
应用指令（“awesomeDir”，awesomeDir）；

我使用此方案使其简单易读：

var awesomeDir = function (MyService, MyAnotherService) {

    var someEmbeddedFunction = function () {
        MyService.doStuff();
    };

    var link = function ($scope, $elem, $attrs) {
        someEmbeddedFunction();
    };

    return {
        template: '<div>...</div>',
        replace: true,
        restrict: 'E',
        link: link
    };

};

awesomeDir.$inject = ['MyService', 'MyAnotherService'];

app.directive('awesomeDir', awesomeDir);

var awesomeDir=function（MyService，MyAnotherService）{
var someEmbeddedFunction=函数（）{
MyService.doStuff（）；
};
变量链接=函数（$scope、$elem、$attrs）{
someEmbeddedFunction（）；
};
返回{
模板：“…”，
替换：正确，
限制：'E'，
链接：链接
};
};
awesomeDir.$inject=['MyService'，'MyAnotherService']；
应用指令（“awesomeDir”，awesomeDir）；

好吧，很公平。我这样做有什么不好的地方吗？我只想去掉闭包中的所有缩进和闭包。额外提示：如果你已经使用了Lodash，你可以做

link:uu.partOK（link，MyService1，MyService2）

，这与你的代码相同，但只在一行中。我会将所有代码放在一个，这甚至可能是一个好主意，因为内存泄漏的可能性更小，因为在哪里使用变量比在闭包中使用变量更清晰。好吧，这很有意义。是的，每个指令都在一个生命周期内。好的，非常感谢！好吧，很公平。我这样做有什么不好的地方吗？我只想去掉闭包中的所有缩进和闭包。额外提示：如果你已经使用了Lodash，你可以做

link:uu.partOK（link，MyService1，MyService2）

，这与你的代码相同，但只在一行中。我会将所有代码放在一个，这甚至可能是一个好主意，因为内存泄漏的可能性更小，因为在哪里使用变量比在闭包中使用变量更清晰。好吧，这很有意义。是的，每个指令都在一个生命周期内。好的，非常感谢！与我所做的相比，这样做的优势是什么？这是添加了一个多余的缩进（即只需将所有注入和指令的对象直接添加到

app.directive（…）

并且直接从缩进零开始使用链接函数。特别是如果我使用IIFE，那么链接函数将不会是全局的，并且不能在多个上下文中使用accros文件。@Kousha他们与我非常相似。当涉及风格问题时，实际上没有“对”或“错”方法。如果你讨厌缩进，那这就是你的事情，但是很多Angular开发者不喜欢。这是另一种非常有效的方式来设计指令代码，警告说这个答案中的代码应该像你提到的那样在生活中。与我做的相比，这样做有什么好处？这是增加了一个比ne更多的缩进必要的（即，只需将所有注入和指令的对象直接添加到

app.directive（…）

上，并直接从缩进零开始添加链接函数。特别是如果我使用IIFE，那么链接函数将不会是全局的，并且不能在多个上下文accros文件中使用。@Kousha它们是