Can we achieve the following functionality in Angular?
<div ng-controller="MainCtrl" ng-init="name='World'">
<test name="Matei">Hello {{name}}!</test> // I expect "Hello Matei"
<test name="David">Hello {{name}}!</test> // I expect "Hello David"
</div>
Although my directive is simple, it seems to be not working as expected:
app.directive('test', function() {
return {
restrict: 'E',
scope: {
name: '@'
},
replace: true,
transclude: true,
template: '<div class="test" ng-transclude></div>'
};
});
I attempted to use the transclude function to modify the scope and it did work. However, the issue lies with losing the template.
app.directive('test', function() {
return {
restrict: 'E',
scope: {
name: '@'
},
transclude: true,
template: '<div class="test" ng-transclude></div>',
link: function(scope, element, attrs, ctrl, transclude) {
transclude(scope, function(clone) {
element.replaceWith(clone);
});
}
};
});
Is there a way to achieve this desired functionality while retaining the template intact and appending the clone into the element with the ng-transclude attribute?
You can test your solution using this Plnkr link: http://plnkr.co/edit/IWd7bnhzpLmlBpoaoJct?p=preview