Angularjs 在指令转换期间无法传递插值

我正在创建一个电子邮件指令，如下所示

angular.module('app')
    .directive('email', function () {
        return {
            restrict: 'EA',
            transclude: true,
            template: '<a href="{{email}}">{{email}}</a>',
            link: function (scope, element, attrs, ctrl, transclude) {                
                transclude(scope, function (clone) {
                    scope.email = clone.text();
                });

            }
        };
    });

<email>{{emailId}}</email>

如何在指令内传递实际插值

---

Plnkr-

要将变量传递给指令作用域，只需使用一个属性：

angular.module('app')
.directive('email', function () {
    return {
        restrict: 'EA',
        ̶t̶r̶a̶n̶s̶c̶l̶u̶d̶e̶:̶ ̶t̶r̶u̶e̶,̶
        template: '<a href="{{email}}">{{email}}</a>',
        link: function (scope, element, attrs, ctrl, transclude) {                
            //transclude(scope, function (clone) {
            //    scope.email = clone.text();
            //});
            scope.email = scope.$eval(attrs.addr);
            //OR
            scope.$watch(attrs.addr, function(value) {
                scope.email = value;
            });
        }
    };
});

angular.module（'app'）
.directive（'email'，function（）{
返回{
限制：“EA”，
"t,r,a,n,s,c,l,u,d,e":"t,t,r,u,e",
模板：“”，
链接：函数（作用域、元素、属性、ctrl、transclude）{
//转移（范围、功能（克隆）{
//scope.email=clone.text（）；
//});
scope.email=scope.$eval（attrs.addr）；
//或
范围$watch（attrs.addr，函数（值）{
scope.email=值；
});
}
};
});

用法：

{{，e，m，a，i，l，i，d}}

不需要使用转换来计算角度表达式

有关详细信息，请参阅

---

只需在元素上添加指令模板ng TRANCLUDE即可 这是密码

angular.module('app')
.directive('email', function () {
    return {
        restrict: 'EA',
        transclude: true,
        template: '<a href="{{email}}" ng-transclude>{{email}}</a>',
        link: function (scope, element, attrs, ctrl, transclude) {          
        }
    };
});

angular.module（'app'）
.directive（'email'，function（）{
返回{
限制：“EA”，
是的，
模板：“”，
链接：函数（作用域、元素、属性、ctrl、transclude）{
}
};
});

这里是链接

---

我同意可以使用属性来实现。但我必须创建最简单的电子邮件指令实现<代码>{emailId}看起来比

更易于使用。该实现不需要在属性中使用花括号。只需执行

。

$eval

和

$watch

都将属性作为角度表达式进行求值。我对花括号没有任何问题。我只希望以这种格式实现

{{emailId}

您正在创建一个难以理解、测试、调试和维护的指令。你所做的是滥用转归机制。Transclusion不用于向指令作用域提供数据。我检查了您的实现

，发现它包含

emailId

，这是来自父控制器作用域的变量。由于它是一个可重用的指令，因此我无法使用任何父范围。当我将您的实现更改为您在上面发布的内容（）时，由于未正确生成

href

，因此无法单击该电子邮件。该指令存在致命缺陷。在给定范围内只能使用一次。

<̶e̶m̶a̶i̶l̶>̶{̶{̶e̶m̶a̶i̶l̶I̶d̶}̶}̶<̶/̶e̶m̶a̶i̶l̶>̶

<email addr="emailId"></email>

angular.module('app')
.directive('email', function () {
    return {
        restrict: 'EA',
        transclude: true,
        template: '<a href="{{email}}" ng-transclude>{{email}}</a>',
        link: function (scope, element, attrs, ctrl, transclude) {          
        }
    };
});