如何在Angular.js中创建新的标记元素

时间:2013-08-15 14:42:22

标签: javascript angularjs angularjs-directive

我想在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>';
    }
});

但它在链接后呈现谷歌,我不知道如何获取网址。

1 个答案:

答案 0 :(得分:3)

您可以在链接功能中获取它。你的指令看起来像这样:

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属性将自动放入指令的范围内。