Javascript 从具有相同属性和内容的指令中调用另一个指令

我想重写一个名为“ui sref”的库指令的行为。让我们看一个例子：

<a ui-sref="edit" class="btn btn-small">
     <i class="icon-pencil"></i> Edit
 </a>

编辑

现在，我想创建自己的指令，例如，“UISREF追加”。代码如下所示：

<a ui-sref-appended="edit" class="btn btn-small">
     <i class="icon-pencil"></i> Edit
 </a>

编辑

我想要的输出必须是：

<a ui-sref="user.edit" class="btn btn-small">
     <i class="icon-pencil"></i> Edit
 </a>

编辑

（然后服从，这样ui sref就可以完成他的工作）

---

我如何实现这一点？问题是，我希望我的a具有相同的属性和内容，但从ui-sref-added=“edit”更改为ui-sref=“user.edit”

如下设置新指令的模板

 template : '<a ui-sref="user.edit" class="btn btn-small"> <i class="icon-pencil"</i> Edit</a>';

---

内容和属性是动态的-可以是任何内容，我不能将其设置为模板。链接函数中有参数吗？我编辑我的帖子。因此，您可以在链接函数中更改模板。

template

代码中的变量是硬编码的，不能硬编码，因为它可以是任何内容，例如ui sref=“user.edit”，user是传递给指令的变量。甚至css类也可以传递给指令。看看我编辑的帖子。

 app.directive('newDirective', function ($compile) {
        return {

            restrict: 'A',
            link: function (scope, element, attrs) {
            var template= '<a ui-sref="user.edit" class="{{btnClass}}"> <i class="icon-pencil"</i> Edit </a>';
element.append($compile(template)(scope));
            },
            scope: {
                user: '=',
                btnClass: '@'
            }
        }
    });

 app.directive('uiSrefAppended', function ($compile) {
        return { 
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.attr('ui-sref', 'user.edit');
                $compile(element)(scope);
            },
            scope: {
                user: '='
            }
        }
    });