angularjs - Ng-Transclude not working for ng-include -
i have created ng-transclude sample not working when use ng-include inside directive template property.below code have tried
angular.module("app",[]); angular.module("app").controller('appcontroller', function ($scope) { $scope.message="message controller"; }); angular.module("app").directive('myframe', function () { return { restrict: 'e', template : '<div ng-include=\"gettemplateurl()\"></div>', controller:function($scope){ $scope.hidden=false; $scope.close=function(){ $scope.hidden=true; } $scope.gettemplateurl=function(){ //dynamic url return "frame.html"; } $scope.message="message directive"; }, transclude:true, } }); angular.module("app").directive('mychildframe', function () { return { restrict: 'e', templateurl:"childframe.html", controller:function($scope){ }, } });
childframe.html
<h2>i child</h2> <div></div>
frame.html
<div class="well" style="width:350px;" ng-hide="hidden"> <div style="float:right;margin-top:-15px"> <i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i> </div> <div ng-transclude> /*frame content goes here*/ </div> </div>
index.html
<my-frame> <mychild-frame></mychild-frame> </my-frame>
https://plnkr.co/edit/o58voi?p=preview
when change property template templateurl="frame.html" it's working fine. problem is, html page inside template dynamic. end ng-include.
could please provide possible workaround?
when using templateurl
property can pass function dynamically load template.
there's no need put function in controller, since doesn't belong there anyway: controller supposed contain view logic, not function load view itself.
i added function in templateurl instead in plunkr:
templateurl : function() { return 'frame.html'; }
https://plnkr.co/edit/hqhi9hktojkzfk2gjxfw?p=preview
as can see gives desired behavior
Comments
Post a Comment