angularjs - Transclude directive fails to modify content -
i have defined transclude directive beliw in angularjs 1.3 - not seem have effect on rendering.
log statement in link phase shows directive invoked though.
index.html
<html lang="en" ng-app="directivesapp"> <head> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </head> <body ng-controller="directivectrl"> <label>geography</label><input type="text" ng-model="geography"/> <br> <div transclude-demo> <button ng-click='showgeography()'>show geography</button> <a href="#">and link</a> </div> </body> </html> app.js
angular.module('directivesapp', []) .controller('directivectrl',function($scope){ $scope.showgeography=function(){alert('i here');} }) .directive('transcludedemo',function(){ return{ transclude: true, template: '<div ng-transclude> directive content</div>', link:function ($scope, element, attrs) { console.log('invoked in scope');} } }); i have expected transclude directive replace/modify contents of div,with contents of template.
however,i find div rendered as-is.
is how transclude directive expected work?
transclude used preserve content that's there, if want replace content need template. you're not seeing in example because containing divs same.
replace content:
.directive('transcludedemo',function(){ return{ template: '<div>this directive content</div>', link:function ($scope, element, attrs) { console.log('invoked in scope');} } }); if you'd combine new/old content in way, add in template outside of ng-transclude , render in combination.
combine transclude:
.directive('transcludedemo',function(){ return{ transclude: true, template: '<div>' + '<p>this text stay in tact</p>' + '<div ng-transclude>this text replaced</div>' + '</div>', link:function ($scope, element, attrs) { console.log('invoked in scope');} } }); as mentioned in comments, second example should give better understanding of what's happening.
Comments
Post a Comment