Держите содержание пользовательской директивы с угловыми

Question

Использование:

<interactive-button id="test-button" class="grey" text="This is a test" icon-left="add">Hello World</interactive-button> 

Выход:

<div class="grey button ng-isolate-scope" id="test-button" text="This is a test" icon-left="add" icon-right="delete"> 
    <i ng-if="::iconLeft" class="icon kico add"></i> 
    <span ng-if="::text" class="sentence ng-binding ng-scope">This is a test</span> 
</div> 

Директива модуля:

/** 
* Created by stephanbijzitter on 28/05/15. 
*/ 
(function() { 
    var directive_name = 'interactiveButton'; 
    var template_file = '/angularTemplates/interactive.button.template.html'; 
    var module = angular.module(directive_name, [template_file]); 

    module.directive(directive_name, function() { 
     return { 
      replace: true, 
      restrict: 'E', 
      scope: { 
       text: '@', 
       iconLeft: '@', 
       iconRight: '@' 
      }, 
      templateUrl: template_file 
     }; 
    }); 

    angular.module(template_file, []).run(['$templateCache', function($templateCache) { 
     $templateCache.put(template_file, 
      '<div class="button">\n' + 
      ' <i ng-if="::iconLeft" class="icon kico {{::iconLeft}}"></i>\n' + 
      ' <span ng-if="::text" class="sentence">{{text}}</span>\n' + 
      ' <i ng-if="::iconRight" class="icon kico {{::iconRight}}"></i>\n' + 
      '</div>' 
     ); 
    }]); 
}()); 

В образце использования, вы можете увидеть Hello World между открытие и закрытие тегов пользовательской директивы. Я хочу иметь возможность работать с этим контентом. Мне не нравится использовать параметр text=... в моей директиве.

По сути, я хочу удалить параметр text и заменить его тем, что находится между тегами директивы.

Возможно ли это, и если да, то каким образом?

Answer 1

Использование transclusion:

module.directive(directive_name, function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     translcude: true 
     scope: { 
      iconLeft: '@', 
      iconRight: '@' 
     }, 
     templateUrl: template_file 
    }; 
}); 

angular.module(template_file, []).run(['$templateCache', function($templateCache) { 
    $templateCache.put(template_file, 
     '<div class="button">\n' + 
     ' <i ng-if="::iconLeft" class="icon kico {{::iconLeft}}"></i>\n' + 
     ' <span class="sentence"><ng-transclude></ng-transclude></span>\n' + 
     ' <i ng-if="::iconRight" class="icon kico {{::iconRight}}"></i>\n' + 
     '</div>' 
    ); 
}]); 


<interactive-button id="test-button" class="grey" icon-left="add">This is a test</interactive-button> 

Answer 2

Вы можете использовать link, чтобы получить элемент, и если у вас есть элемент, вы можете делать с ним все, что захотите. Например:

module.directive(directive_name, function() { 
    return { 
     replace: true, 
     restrict: 'E', 
     scope: { 
      text: '@', 
      iconLeft: '@', 
      iconRight: '@' 
     }, 
     link: function(scope, element, attr){ 
      var yourText = element.text(); 
     }, 
     templateUrl: template_file 
    }; 
}); 

Я думаю, что это то, что вы ищете. Я не тестировал код, но все должно быть хорошо.