javascript - 在什么情况下有必要同时使用 Angular 编译和链接功能

Question

这是我在 Angular 中的自定义指令。我是 Angular Directive(指令)的新手。

app.directive('customer',function()
{
var directive = {};

directive.restrict = 'E';

directive.template = "Customer name : <b> {{customer.custName}} </b> , Customer Email : <i> {{customer.custEmail}} </i>";

directive.scope = {
    customer: "=name"
}

directive.compile = function(element, attributes)
{
    element.css("border", "1px solid #f00");
    var linkFunction = function($scope,element,attributes)
    {
        element.html("Customer name : <b>"+ $scope.customer.custName +"</b> , Customer Email : <i>"+ $scope.customer.custEmail+" </i>");
        element.css("background-color", "#ff0");
    }

    return linkFunction;
}

return directive;

})

为什么要使用编译链接功能？

谁能解释一下这些东西在指令中的作用是什么？

directive.scope
directive.compile
var linkfunction

Answer 1

现在 transclude 参数可用于链接函数(我相信从 1.2 开始)，我看不到编译函数有多大用处。

虽然它可以让您在处理链接功能之前完成工作，但它是在没有太多有值(value)的工作要做的时候出现的。例如，绑定(bind)已被处理。

范围尚未绑定(bind)的事实，如果您正在使用嵌入并坚持使用 Angular 1.2 之前的某些版本，则可能会有用，但由于您可以通过链接函数访问 transclude 函数，现在我仍然不看不到它有多大用处。

至于各种指令属性的用途，我会看一下 AngularJS documentation page for Directives .

链接函数为我们注册事件监听器和操作 DOM 元素提供了一种干净简单的方法。

scope 属性允许您配置将由指令使用的 AngularJS 范围对象。它可以采用 bool 值 true(范围与父级共享)、false(指令的范围与父级的范围隔离)或一个对象。