如何在Angular.js中創建新的標簽元素

Question

我想在Angular.js中創建新元素

<link url="http://google.com">google</link>

將會轉換為<a>標記，我該怎么做？

到目前為止的代碼：

var app = angular.module('app', []);
app.directive('link', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: false,
        template: '<a href="" ng-transclude></a>';
    }
});

但它會在鏈接后顯示google，但我不知道該如何獲取網址。

Answer 1

您可以在鏈接功能中獲得它。 您的指令如下所示：

app.directive('link', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: false,
        template: '<a href="{{url}}" ng-transclude></a>',
        link: function(scope, element, attrs) {
            scope.url = attrs.url;
        }
    }
});

如果可以為指令創建隔離范圍，則還可以執行以下操作：

app.directive('link', function() {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
            url: '@'
        },
        template: '<a href="{{url}}" ng-transclude></a>'
    }
});

然后，url屬性將自動放入指令的范圍內。