동일한 속성 및 콘텐츠로 지시문에서 다른 지시문을 호출하십시오.

Question

ui-sref "라는 하나의 라이브러리 지침의 동작을 재정의하고 싶습니다.예제를 참조하십시오.

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

.

이제, 예를 들어 ui-sref-add "이라는 내 자신의 지시문을 만들고 싶습니다.코드는 다음과 같습니다 :

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

.