Dynamic attributes AngularJS

Question

Goal of my app is to create property editor. From server i got list of properties and it's types:

$scope.properties = [
    {name: 'property1', type: 'integer', 'value': 123},
    {name: 'property2', type: 'bool', 'value': 123},
    {name: 'property3', type: 'string', 'value': 123},
    {name: 'property4', type: 'custom', 'value': 123},
];

Using this data i want to create html list like this. This part is not working. How to change it?

<ul>
    <li ng-repeat="property in properties">
        <div property-editor-{{property.name}} my-data="property"></div>
    </li>
</ul>

Then i can easily implement directives with it's custom controllers like this

angular.module('PropertyEditor').directive('propertyEditorCustom', function() {
    return {restrict: 'A',controller:function(){...}};
})

PS: I want to avoid a centralized switch, because new modules can add it's custom types.

KyleK · Accepted Answer · 2017-03-06 10:59:01Z

1

It would not work like this. Or you would need a first directive that would bind the second dynamic one.

I better recommend to use the value:

<ul>
    <li ng-repeat="property in properties">
        <div property-editor="property.name" my-data="property"></div>
    </li>
</ul>

And get it like this:

angular.module('PropertyEditor').directive('propertyEditor', function() {
    return {
        restrict: 'A',
        scope: {
            propertyEditor: '='
        },
        controller: ['$scope', function($scope) {
            console.log($scope.propertyEditor); // Here you can do specific stuff for propertyEditor
        }]
    };
})

To bind a second directive with it (the usage I really not recommend), you can use link:

angular.module('PropertyEditor').directive('propertyEditor', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {
            propertyEditor: '='
        },
        link: function($scope, $element) {
            var $newElement = $element.clone(true);
            $newElement.removeAttr('property-editor').attr('property-editor-' + $scope.propertyEditor, 'property-editor-' + $scope.propertyEditor);
            $handler = $('<div>').append($newElement);
            $element.replaceWith($compile($handler.html())($scope));
        }
    };
}])

edited Mar 6, 2017 at 10:59

answered Mar 6, 2017 at 10:44

KyleK

5,16920 silver badges35 bronze badges

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

4 Comments

Pekarcik Patrick Over a year ago

Thanks, how can i get to dynamic directive using this helper one? Can directive controller (propertyEditor) create this? <div property-editor-integer="" my-data="property"></div>

Pekarcik Patrick Over a year ago

You said link usage is not recommended, can you explain why? Is there recommended solution? Or i should change my attitude

KyleK Over a year ago

Yes, dynamically re-compile, re-transclude or anything like recreate DOM on the fly will make your code very hard to maintain. Why do you not use one single property-editor with a type parameter that would handle each type of property?

Pekarcik Patrick Over a year ago

Because of modularity of our application. I found more then 10 distinct property types. So i want to leave open possibilities for all modules i have. I was thinking about dynamic template properties where i will generate html list server side. I'll test it.

Collectives™ on Stack Overflow

Dynamic attributes AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest