How to create new tag element in Angular.js

Question

I want to create new element in Angular.js

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

that will be converted to <a> tag, How can I do this?

The code so far:

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

but It render google after a link and I don't know how to get the url.

Answer 1

You can get it in the linking function. Your directive would look like this:

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;
        }
    }
});

If you're ok with creating an isolated scope for your directive, you can also do this:

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

Then the url attribute will automatically get put into the scope of the directive.