AngularJS - Directive template dynamic

AngularJS - Directive template dynamic

How can I create a directive with a dynamic template?

'use strict';    app.directive('ngFormField', function($compile) {  return {      transclude: true,      scope: {          label: '@'      },      template: '{{label}}',      // append      replace: true,      // attribute restriction      restrict: 'E',      // linking method      link: function($scope, element, attrs) {          switch (attrs['type']) {              case "text":                  // append input field to "template"              case "select":                  // append select dropdown to "template"          }      }    }  });  

This is what I have right now, and it is displaying the label correctly. However, I'm not sure on how to append additional HTML to the template. Or combining 2 templates into 1.

Answer by kwon for AngularJS - Directive template dynamic

Had a similar need. $compile does the job. (Not completely sure if this is "THE" way to do it, still working my way through angular)

http://jsbin.com/ebuhuv/7/edit - my exploration test.

One thing to note (per my example), one of my requirements was that the template would change based on a type attribute once you clicked save, and the templates were very different. So though, you get the data binding, if need a new template in there, you will have to recompile.

Answer by zim for AngularJS - Directive template dynamic

i've used the $templateCache to accomplish something similar. i put several ng-templates in a single html file, which i reference using the directive's templateUrl. that ensures the html is available to the template cache. then i can simply select by id to get the ng-template i want.

template.html:

directive:

myapp.directive(?foobardirective?, ['$compile', '$templateCache', function ($compile, $templateCache) {        var getTemplate = function(data) {          // use data to determine which template to use          var templateid = 'foo';          var template = $templateCache.get(templateid);          return template;      }        return {          templateUrl: 'views/partials/template.html',          scope: {data: '='},          restrict: 'E',          link: function(scope, element) {              var template = getTemplate(scope.data);                element.html(template);              $compile(element.contents())(scope);          }      };  }]);  

Answer by nakosung for AngularJS - Directive template dynamic

I managed to deal with this problem. Below is the link :

https://github.com/nakosung/ng-dynamic-template-example

with the specific file being:

https://github.com/nakosung/ng-dynamic-template-example/blob/master/src/main.coffee

dynamicTemplate directive hosts dynamic template which is passed within scope and hosted element acts like other native angular elements.

scope.template = '< div ng-controller="SomeUberCtrl">rocks< /div>'  

Answer by Aquajet for AngularJS - Directive template dynamic

You should move your switch into the template by using the 'ng-switch' directive:

module.directive('testForm', function() {      return {          restrict: 'E',          controllerAs: 'form',          controller: function ($scope) {              console.log("Form controller initialization");              var self = this;              this.fields = {};              this.addField = function(field) {                  console.log("New field: ", field);                  self.fields[field.name] = field;              };          }      }  });    module.directive('formField', function () {      return {          require: "^testForm",          template:              '
' +              '    {{title}}:' +              '    ' +              '    ' +              '        ' +              '    ' +              '
',          restrict: 'E',          replace: true,          scope: {              fieldType: "@",              title: "@",              name: "@",              value: "@",              options: "=",          },          link: function($scope, $element, $attrs, form) {              $scope.field = $scope;              form.addField($scope);          }      };  });  

It can be use like this:

      
          User '{{!form.fields.email.value}}' will be a {{!form.fields.role.value}}      
                      

Answer by Hazarapet Tunanyan for AngularJS - Directive template dynamic

If you want to use AngularJs Directive with dynamic template, you can use those answers,But here is more professional and legal syntax of it.You can use templateUrl not only with single value.You can use it as a function,which returns a value as url.That function has some arguments,which you can use.

http://www.w3docs.com/snippets/angularjs/dynamically-change-template-url-in-angularjs-directives.html

Answer by felix at housecat for AngularJS - Directive template dynamic

I have been in the same situation, my complete solution has been posted here

Basically I load a template in the directive in this way

var tpl = '' +       
      
' +      '
      
';  

then according to the value of maxLength and required I can dynamically load one of the 2 templates, only one of them at a time is shown if necessary.

I heope it helps.

Answer by user2173353 for AngularJS - Directive template dynamic

One way is using a template function in your directive:

...  template: function(tElem, tAttrs){      return '
';  }  ...  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72