CODEWITHSUNDEEP
jquery-uiangularjsangularjs-directive
Nathaniel Johnson
Nathaniel Johnson

Reputation: 4839

Passing complex information in Angular directives

I am using JQuery UI in an Angular application. I noticed that I was repeating the same pattern for each directive: Call the JQuery UI function with a single complex object for initialization. Rather than write separate directives for each component, I have found it easier to use a stub directive. This may not be a long term solution but it works for now.

Is there a better way to inject the attributes to make the markup more readable while still keeping the generic nature of the directive? Specifically, can I avoid using a JSON string so that it reads more like a normal angular directive.

The existing line:

<button jquiw-control='{"control":"button","options":{"label":"Hello","icons": {"primary": "ui-icon-gear","secondary": "ui-icon-triangle-1-s"}}}' ng-click="jump()"></button>

<button jquiw-control="button" jquiw-button-label="Hello" jquiw-button-icons-primary= "ui-icon-gear" jquiw-button-icons-secondary="ui-icon-triangle-1-s" ng-click="jump()"></button>

Here is a plunk of a working example of my Generic ui directive. http://plnkr.co/edit/eRoOeq

Upvotes: 0

Views: 83

Answers (1)

zs2020
zs2020

Reputation: 54524

At least you can put the hardcoded JSON in the controller like this

$scope.config = {
    "control": "button",
        "options": {
        "label": "Hello",
            "icons": {
            "primary": "ui-icon-gear",
            "secondary": "ui-icon-triangle-1-s"
        }
    }
};

and then change the template to

<button jquiw-control='{{config}}' ng-click="jump()"></button>

Plunker: http://plnkr.co/edit/yY1Lc2?p=preview

Upvotes: 1

Related Questions