AngularJS 지시문을 사용하여 입력 필드에 버튼을 추가하는 방법은 무엇입니까?

Question

입력 필드에 버튼을 추가 할 수있는 지시문과 다른 기능을 작성해야합니다. 그래서, 이상적으로 나는 끝나게이

<input type="text" my-directive> 

같은 것을 갖고 싶어

<input type="text"><button ng-click="someAction()" ng-class="{'success': isSuccess()}" ng-disabled="isDisabled()">click me</button> 

내 지시어

단순화 된 코드 :

app.directive('myDirective', ['$q', '$timeout', function ($q, $timeout) { 
        return { 
        restrict: 'A', 
        template: '<button ng-click="someAction()" ng-class="{\'success\': isSuccess()}" ng-disabled="isDisabled()">click me</button>', 

        require: '?ngModel', 
        link: function (scope, element, attrs, ctrl) { 

         scope.isSuccess = function() { 
          ... 
         }; 

         scope.isPending = function() { 
          ... 
         }; 
         scope.someAction = function() { 
          ... 
         }; 


....}]); 

문제는 그 나는이를 추가하는 경우 지시문 템플릿의 버튼 내가 끝까지 <input><button></button></input>

입력 필드를 포함하는 지시문을 작성하는 것은 불행히도 나를위한 옵션이 아닙니다. 자세한 정보를 제공해야하는지 알려주세요.

Answer 1

몇 가지 검색을 한 후에 해결책을 찾았습니다. 지시어의 링크 함수에서 요소를 컴파일하고 요소에 추가하여 요소를 추가 할 수 있습니다.

link: function (scope, element, attrs, ctrl) { 
        var tpl = <button ng-click="someAction()" ng-class="{\'success\': isSuccess()}" ng-disabled="isDisabled()">click me</button>'; 
        var el = $compile(tpl)(scope); 
        element.after(el); 
...}