I have the following sudo html
<foo>
<span>Bar</span>
</foo>
and directive:
myapp.directive('foo', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div><p>{{usedToBeInSpan}}</p></div>'
}
});
How can I extract the contents of the nested span node and set its contents in the directives scope to usedToBeInSpan?
Note that I am not actually using this to replace a nested tag, it's just a simplified example
You can add a link function in your directive as below:
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"
}
}
});
Found a new solution. Angular creates a css class named after the directive content, like "ng-<directive>-content" using this you can access the content of the directive where it was used. Have a look at this fiddle:
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>'
}
});
linkfunction and extract all html content fromspanusing.html()and add in your template.html()function on?