dynamic template to directive in angularjs

Question

I need to decide the template based on the date. I saw a good example. But in that example the templates are so simple that he could used strings. In my case I want use php to produce the templates, so I used it this way:

eng.directive('vis', function ($compile) {
var getTemplate = function(ir) {
    var k = (ir.visits.last && parseInt(ir.visits.last.done))?'V':'E';
    var s = (ir.data.kind == 0)?'H':'V';
    return s+k+'T';
}

var linker = function(scope, element, attrs) {
    scope.$watch('ir',function(){
        if (!scope.ir) return;
        element.html(jQuery('#'+getTemplate(scope.ir)).html()).show();
        $compile(element.contents())(scope);
    })
}
return {
    restrict: "E",
    rep1ace: true,
    link: linker
};});

and the templates are:

<div id=HVT style="display:none">
    <p>horizontal view template</p>
</div>
<div id=HET style="display:none">
    <p>horizontal {{1+5}} Edit template</p>
</div>
<div id=VVT style="display:none">
    <p>vertical view template</p>
</div>
<div id=VET style="display:none">
    <p>vertical Edit template</p>
</div>

I am sure there is a smarter way. is it better to use templateUrl ? could somebody tell me how to use it in my case?

Edit: there is a problem. the template does not see the scope

Ruud · Accepted Answer · 2013-08-15 07:22:51Z

16

This is also possible for creating dynamic templates in AngularJS: In your directive use:

template : '<div ng-include="getTemplateUrl()"></div>'

Now your controller may decide which template to use:

$scope.getTemplateUrl = function() {
  return '/template/angular/search';
};

Because you have access to your scope parameters, you could also do:

$scope.getTemplateUrl = function() {
  return '/template/angular/search/' + $scope.query;
};

So your server could create a dynamic template for you.

answered Aug 15, 2013 at 7:22

Ruud

5917 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

m.e.conroy Over a year ago

template & templateUrl can take a function like: function(el,attrs){ return '/tmpls/' + attrs.template; }

Anand Over a year ago

I tried above method, its working fine for me now even i have control over navigation,only problem is if i have dynamic state(state('manualTest/:testName', ) and am coming back to dynamic state page, ng-init is getting called twice

Community · Accepted Answer · 2017-05-23 12:25:09Z

3

I find the solution here

in this example http://jsbin.com/ebuhuv/7/edit

find this code:

app.directive("pageComponent", function($compile) {
    var template_for = function(type) {
        return type+"\\.html";
    };
    return {
        restrict: "E",
        // transclude: true,
        scope: true,
        compile: function(element, attrs) {
            return function(scope, element, attrs) {
                var tmpl = template_for(scope.component.type);
                element.html($("#"+tmpl).html()).show();
                $compile(element.contents())(scope);
            };
        }
    };});

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Mar 14, 2013 at 15:16

Aladdin Mhemed

3,9999 gold badges46 silver badges58 bronze badges

Comments

Mark Rajcok · Accepted Answer · 2013-03-14 18:16:47Z

With Angular, you don't need to use ids. Also, instead of display:none you can use ng-show:

<div ng-show="HVT">
    <p>horizontal view template</p>
</div>
<div ng-show="HET">
    <p>horizontal {{1+5}} Edit template</p>
</div>
...

Your $watch callback (which you can define on a controller or in a directive) can then simply modify the appropriate scope property:

var getTemplate = function (ir) {
    var k = (ir.visits.last && parseInt(ir.visits.last.done)) ? 'V' : 'E';
    var s = (ir.data.kind == 0) ? 'H' : 'V';
    return s + k + 'T';
}
$scope.$watch('ir', function () {
    if (!$scope.ir) return;
    // hide all, then show the one we want
    $scope.HVT = false;
    $scope.HET = false;
    $scope.VVT = false;
    $scope.VET = false;
    $scope[getTemplate($scope.ir)] = true;
})

Fiddle. The fiddle has the above code in a controller, since I have no idea where you might be using the directive. The fiddle also just hardcodes "VET", since I don't know what ir looks like.

Collectives™ on Stack Overflow

dynamic template to directive in angularjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related