同じ属性と内容のディレクティブから別のディレクティブを呼び出します。

Question

"ui-sref" という1つのライブラリ指令の動作をオーバーライドしたいです。例：

を見てください

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

.

今、私は "ui-sref-添付" と呼ばれる私の指示を作成したいです。コードは次のようになります：

<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-appended="edit" から ui-sref=に変更されています。"user.edit"

Answer 1

新しい指令のテンプレートを次のように設定します

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

.

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

.