AngularJS theme color picker issue

Question

http://codepen.io/anon/pen/MJbagW

In the above codepen , i have the theme color picker and it changes the color based on the button clicked.

Issue: i was wondering if it could be changed into this scenario , you pass the color you wan through directive as a parameter

For example:

<my-application color="blue"></my-application>

So in this case, the word blue would be taken in the directive and then the blue theme would be applied to the application. I wonder if this is possible?

I need this as I want to change the color of my directive I just created based on user's needs.

Question: Is my question above workable ? Or is there another way i could change the color of the angular theme through passing in parameters only.

Answer 1

In your example you can see that the directive "themePreview" already takes parameters:

<theme-preview primary="primary" accent="accent"></theme-preview>

It takes the primary and accent color passed in the attributes, you can copy that behavior in your application.

Example:

In the codepen, change the attributes color:

<theme-preview primary="'purple'" accent="'yellow'"></theme-preview>

Since the example directive is using two-way binding, you have to single quote strings.

Or you can change to text binding @ :

Directive

{
  restrict: 'E',
  templateUrl: 'themePreview.tmpl.html',
  scope: {
  primary: '@',   //<--- Text binding
  accent:  '@'    //<--- Text binding
  }
}

Html

<theme-preview primary="purple" accent="yellow"></theme-preview>

You can look for information on Isolate Scope and Local Scope Properties to have a clear understanding of what you want to achieve. Try reading this blog post .