CODEWITHSUNDEEP
angularjsangularjs-ng-transclude
Jameel Moideen
Jameel Moideen

Reputation: 7931

Ng-Transclude not working for ng-include

I have created a ng-transclude sample which is not working when I use ng-include inside directive template property.Below are the code I have tried

angular.module("app",[]);
angular.module("app").controller('appController', function ($scope) {

   $scope.message="Message from 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 from directive";
        },
        transclude:true,


    }

});
angular.module("app").directive('mychildFrame', function () {
    return {
        restrict: 'E',
        templateUrl:"childframe.html",
        controller:function($scope){

        },


    }

});

childFrame.html

<h2>I am from 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 I change to the property template to templateUrl="frame.html" it's working fine. But the problem is, this HTML page inside the template is dynamic. So I end up with ng-include.

Could you please provide any possible workaround?

Upvotes: 2

Views: 740

Answers (1)

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

When using the templateUrl property you can also pass it a function to dynamically load a template.

There's no need to put the function in a controller, especially since it doesn't really belong there anyway: the controller is supposed to contain view logic, not a function to load the view itself.

I added the function in the templateUrl instead in your plunkr:

templateUrl : function() {
  return 'frame.html';
}

https://plnkr.co/edit/HQHI9hkTojkZFK2Gjxfw?p=preview

As you can see this gives you the desired behavior

Upvotes: 1

Related Questions