AngularJS directive runtime template change

Question

I have been trying to make an input directive, that allows for different input types (eg Interval (min-max), DateTime, Number, Text...). It is very important that whenever the user changes the type of the data, the corresponding input changes its template. I also need to be able to have more than one input on the page (see PLUNKR to better understand).

After a lot of trial and error, and research, I have come to a conclusion that i need to watch the attribute (great-input), replace the template of my input, according to value from selected input type, and compile it. But I am not able to do it in compile function, and my watches are not working properly in link function (i am getting t1,t2).

So, what I need to do is, on change of value in select(type), change the template of input (for simplicity, I have just color coded the different input types).

$scope.$watch('greatInput', function (newVal) {
     console.log(newVal);
     html = getTemplate(newVal);
     $elem.html('').append($compile(html)($scope));
});

This is pretty much the function that should do the work (with some changes, according to where it is implemented), but I cant find the right place for it.

Complete code on: http://plnkr.co/edit/BCuiqg?p=preview

possible duplicate of AngularJS - Directive template dynamic — Manish Kr. Shukla
– Manish Kr. Shukla, Commented Apr 29, 2015 at 10:34
@TechMa9iac Can you elaborate? I ran into that one, and I couldnt find what I need there. I looked into it again,deeper this time, and I am still failing to see how can I use the jsbin from accepted answer in my case. Is there something I am missing? — lexluthor1391
– lexluthor1391, Commented Apr 30, 2015 at 8:55

New Dev · Accepted Answer · 2015-05-09 05:38:15Z

2

By far the easiest approach would be to use ng-ifs in the directive template and bind the type of input on the scope:

.directive("greatInput", function(){
  return {
    template: '<input ng-if="isStr()" type="txt"    ng-model="greatInputModel">\
               <input ng-if="isInt()" type="number" ng-model="greatInputModel">\
               <input ng-if="isDbl()" type="number" ng-model="greatInputModel">',
    scope: {
      greatInputModel: "=",
      greatInputType: "@",
      // etc...
    },
    link: function($scope){
       $scope.isStr = function(){
          return $scope.greatInputType === "5" || someotherCondition();
       }
       // same for $scope.isInt and $scope.isDbl
    }
  }
});

answered May 9, 2015 at 5:38

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

1 Comment

lexluthor1391 Over a year ago

This is a super late answer, but it might help anyone looking into it. What You offered as a solution works, but we had some huge templates for different input types, so we ended up using the code from my question. The problem we had was with dependency injection. At the time, we were not very experienced with Angular. I believe we added an extra unnecessary dependency, which caused an error.

Collectives™ on Stack Overflow

AngularJS directive runtime template change

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related