Question

我有点担心如果我问一个菜鸟问题，或者它是一个javascript功能，尽管有大量的谷歌搜索我仍然无法找到

我正在使用$ compile以编程方式添加一个简单的指令，一切正常。

我的问题是这一行

var el = $compile(newElement)($scope);

双括号如何工作/他们做什么？完整的代码可供参考，但它只是我不确定的括号。

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function() {
   return {
        template: 'Hello',
        restrict: 'E'
    }
});

myApp.controller('mainController', [
    '$scope', '$compile', function($scope, $compile) {

        $scope.addDirective = function() {
            var newElement = angular.element(document.createElement('my-directive'));
            var el = $compile(newElement)($scope);
            angular.element(document.body).append(el);
        };
    }
]);

Answer 1

$compile返回另一个函数。你可以做类似的事情：

function foo(greeting) {
  return function(target) { console.log(greeting, target) };
}

foo('Hello, ')('world');

Answer 2

正如您已经知道javascript中的括号是一个函数调用操作符（以及分组）。换句话说，使用()运算符可以调用函数。从这里可以清楚地看到代码

$compile(newElement)($scope);

表示$compile(newElement)的结果是函数，因此可以执行。这个返回的函数接受一个参数 - 一个范围对象，其中应编译上下文的新DOM元素。

Answer 3

$compile(tElement, tAttrs, transclude)返回指令link:（后链接）功能。

app.directive('exampleDirective', [function () {
    return {
        restrict: 'A',
        scope: { value: '=value'},
        template: template,
        link: function (scope, element, attr) {

            scope.count = 0;
            scope.increment = function() {
                scope.value++;
            };

        }
    };
}]);

在这种情况下，$compile('<div example-directive></div>');将返回link:函数，因此您可以使用参数（scope作为第一个）调用它并实例化上下文。

Answer 4

这些只是调用函数的标准Javascript语法。可能令人困惑的是$compile是一个返回函数的函数。所以

$compile(newElement)

本身就是函数，可以像任何其他函数一样被调用，这就是写

时发生的事情

$compile(newElement)($scope);

如果您愿意，可以将其拆分为单独的行，这可能会更清楚：

var linkFunction = $compile(newElement);
linkFunction($scope);

您可以参考usage of $compile in the docs。

作为旁注，我会警惕直接使用$compile：你可能会使事情过于复杂，而且可能会有更简单的替代方案（我很少使用它）

什么是angularjs $ compile双括号

4 个答案: