I know I can do this:
<my-directive attr="myAttr"></my-directive>
and then have the attr to be accessed via the my-directive side.
But I want to do something like this:
<my-directive attr="myAttr">
<a href="">Some link that will apply with the my-directive directive too</a>
</my-directive>
Is this possible?
Using ng-transclude can solve the problem:
// html
<my-directive my-attr="Hello">
<a href="#">My link</a>
</my-directive>
// my-directive.js
app.directive("myDirective", function() {
return {
transclude: true,
template: "<h1>{{myAttr}: <ng-transclude></ng-transclude></h1>", // <h1>Hello: <a href...>...</a></h1>
scope: {
myAttr: "@"
},
link: ($scope, element, attrs) => {
console.log($scope.myAttr); // Hello
}
}
});
ng-transcludeoption.