angularjs : pass argument to dynamic directive

Question

I have this simple directive:

app.directive('string', function () {
    return{
        template: '<input id="{{field.name}}" name="{{field.name}}" type="text" value="{{field.value}}"/>',
        restrict: 'E',
    };
});

That I'm creating in a controller:

for(var i=0;i<$scope.steps;i++){
   var step = $scope.steps[i];
   var element = document.createElement(step.type);

   var compiled = $compile(element)($scope);
   $(document.body).append(compiled);
}

this outputs a textfield without a value. How can I give my directive the 'step' variable and print it out in the text field as step.value?

Chandermani · Accepted Answer · 2015-05-08 10:24:30Z

1

You should simply use ng-repeat for this

<string ng-repeat='field in steps'></string>

Update: Doing what ng-repeat does

for(var i=0;i<$scope.steps;i++){
   var childScope=$scope.$new();
   childScope.field=$scope.steps[i];
   var element = document.createElement(field.type);

   var compiled = $compile(element)(childScope);
   $(document.body).append(compiled);
}

edited May 8, 2015 at 10:24

answered May 8, 2015 at 9:36

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

8 Comments

PoeHaH Over a year ago

But not all fields in steps are strings :)

Chandermani Over a year ago

use it with filter 'field in steps|filter:{type:"string"}'

Chandermani Over a year ago

Or you can even use <string ng-repeat='field in steps' ng-if='field.type=="string"'></string>

PoeHaH Over a year ago

but what I want is to retain the order in which they are in the array, I'd feel stupid writing <string> and then <option> and then <whatever> for each different type. I want to do it programmatically.

PoeHaH Over a year ago

Surely what I'm asking above is possible?

|

Collectives™ on Stack Overflow

angularjs : pass argument to dynamic directive

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related