Generate different fields depends on DOM elements in angularjs

Question

So i have an application that should take the html of one page which contains different custom directives.

and there is another page which will load the html of the first page and generate input fields according to the number of the custom directive (cms-input) existing in the first page and to the type specified.

so for example here is the first html page

<cms-input type='text' size='14' default='header' label='Header' ></cms:input>

<cms-input type='textfield' size='50' default='paragraph' label='Paragraph'> </cms:input>

the second page should load the first page and generate the fields :

<label>Header</label>
<input type='text' value='header'>
<label>Paragraph</label>
<textarea>paragraph</textarea>

the problem is how to generate tags according to the attributes of the directives in the other page — ziz194
– ziz194, Commented Jan 19, 2015 at 15:00
The first page would be a view. The second page would be a route that sets data in a model/scope and displays the view. There is nothing more to it. You do not need directives for anything other than the <cms-input> to label + input transformation. There should be no second page, just a route. — oldwizard
– oldwizard, Commented Jan 19, 2015 at 15:13
The <cms-input> directive was already answered in the original answer here stackoverflow.com/questions/28023660/… I'd say this is a dupe. — oldwizard
– oldwizard, Commented Jan 19, 2015 at 15:18

Marcus · Accepted Answer · 2015-01-19 15:14:37Z

1

Thats what directives are designed for, point is to figure out best way to pass and evaluate those attributes of fields, in plnkr i made a possible solution.

Here you have a starting point: PLNKR

app.directive('cmsInput', function() {
  return {
    restrict: 'E',
    template: '<label ng-if=(exists(label))>{{label}}</label>',
    controller: function($scope) {
      $scope.exists = function(a) {
        if(a && a.length>0) {
          return true;
        }
        return false;
      }
    },
    link: function(scope, elem, attr) {

      scope.label = attr.label;
      
    }
    
  }
  
})

It requires work, but you'll get the point.

EDIT: You could use 'scope' field of directives to bind values, but for purpose of finding solution I wanted to make it as clear as possible.

EDIT2: Angular directive is being define with a rule "camelCase" in javascript(directive name) is eaxctly "camel-case" in html, as a directive call.

Angular matches correct js code to called directive and puts exactly in that place in DOM your template. One of the parameters of link method are attributes, those are the same values that you have in html, so under: 'attr.label' you get value of 'label' in html, in this case string "header".

The template attribute of directive is a string with bindigs to variables that were set in scope and and when we combine it all together we get:

Angular "finds" a directive
Directive code is being fired
Link function is being called - inside which we set to field named "label" value of attribute named "label"
Template compiles - under {{ }} markers correct variables are being set.
vio'la - in place of this cms-input element you get normal html

edited Jan 19, 2015 at 15:14

answered Jan 19, 2015 at 15:00

Marcus

3411 silver badge8 bronze badges

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

2 Comments

ziz194 Over a year ago

so the scope here will bw global or just for the directive as isolated one ?

Marcus Over a year ago

your directive get its own scope, in directive markdown you can add something like: scope: { label: "="} It means that field named "label" in html element will be bound to scope field named "label"

Collectives™ on Stack Overflow

Generate different fields depends on DOM elements in angularjs

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related