Why does ng-style not work on the same element as a custom directive?

All we need is an easy explanation of the problem, so here it is.

I’m trying to apply the ng-style attribute on a custom directive tag, kind of like so:

<my-directive ng-style="myStyle"></my-directive>

Inside the controller I have:

$scope.myStyle = {
    "background": "red"
}

This doesn’t seem to work though. When I inspect the HTML ‘MyStyle’ does not get rendered. When I apply the same ng-style tag on a regular div it does render properly.

Why doesn’t ng-style work on custom directive tags?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Your directive likely defines an isolate scope: scope: { ... }. In that case, all directives defined on that element will use the isolate scope. Therefore, ng-style will look for property myStyle on the isolate scope, which doesn’t exist.

Above, gray lines show $parents, dashed lines show prototypal inheritance.
Scope 004 is your isolate scope. Scope 003 is your controller scope. ng-style will look for myStyle in scope 004, not find it, then it will follow the dashed line and look for it in Scope, and not find it there either.

Normally you don’t want to use directives that create an isolate scope along with other directives on the same element. You have a few options:

1. use scope: true instead of an isolate scope in your directive. Then when ng-style looks for myStyle in scope 004 and doesn’t find it, it will then follow the dashed line (in the picture below) and find it in the parent scope:
   
2. use ng-style="$parent.myStyle" in your HTML to access the myStyle property in the parent scope (i.e., follow the gray line in the first picture).

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0