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

Question

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

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

现在，我想创建自己的指令，例如，“ui-sref-attached”。代码将是这样的：

<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-attached =“edit”更改为 ui-sref = “user.edit”

Answer 1

设置新指令的模板如下

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

并在link函数中设置user.edit或通过范围成员将用户传递给指令。

如果您有动态模板，则可以在链接功能中创建指令模板。

 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: '@'
            }
        }
    });

修改

如果您只想设置ui-sref，只需将ui-sref作为属性添加到元素中，然后进行编译。

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