доступ вложенных узлов в угловой директиве

Question

У меня есть следующий SUDO HTML

<foo> 
    <span>Bar</span> 
</foo> 

директива:

myapp.directive('foo', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div><p>{{usedToBeInSpan}}</p></div>' 
    } 
}); 

Как извлечь содержимое вложенных span узла и установить его содержимое в директивах до usedToBeInSpan?

Обратите внимание, что я на самом деле не использовать это, чтобы заменить вложенный тег, это просто упрощенный пример

Answer 1

Вы можете добавить функцию ссылки в вашей директиве, как показано ниже:

myapp.directive('foo', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    template: '<div><p>{{usedToBeInSpan}}</p></div>', 
    link: function (scope, element, attrs) { 
      // the element argument contains the html content inside the directive tags <foo></foo> 
      scope.usedToBeInSpan = "";//populate from "element" 
    } 
} 
}); 

Answer 2

Найденный новое решение. Угловой создает класс css, названный в честь содержимого директивы, например, «ng-< директива > -content», используя это, вы можете получить доступ к содержанию директивы, в которой оно было использовано. Посмотрите на эту скрипку:

https://jsfiddle.net/manasisakhare/8ezh35to/2/

myapp.directive('foo', function() { 
    return { 
     restrict: 'E', 
     //replace: true, 
     transclude: true, 
     template: '<div><p class="ng-foo-content" ng-transclude></p></div>' 
    } 
});