ng-style이 사용자 정의 지시문과 동일한 요소에서 작동하지 않는 이유는 무엇입니까?

Question

나는 가지과 같이, 사용자 정의 지시어 태그의 NG 스타일의 특성을 적용하기 위해 노력하고있어 :

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

컨트롤러 내부에서 내가 가진 :

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

이하지 않는 것 일한다. HTML을 검사 할 때 'MyStyle'이 렌더링되지 않습니다. 일반 div에 동일한 ng 스타일 태그를 적용하면 올바르게 렌더링됩니다.

왜 정의 지시어 태그에 대한 작업 스타일 ng를하지 않는 이유는 무엇입니까?

Answer 1

귀하의 지시어는 일 가능성 분리 범위를 정의 : scope: { ... }. 이 경우 해당 요소에 정의 된 모든 지시문은 격리 범위를 사용합니다. 따라서 ng 스타일은 격리 범위에서 속성 myStyle을 찾지 만 존재하지 않습니다.

는 위, 회색 선은 선이 프로토 타입 상속을 보여 점선, $ 부모님을 보여줍니다. 범위 004는 분리 범위입니다. Scope 003이 컨트롤러 범위입니다. NG 스타일은이 점선을 따라 범위에 대한보고, 하나가 그것을 발견 할 수는 없을 것이다, 그것을 찾을 수없는, 범위 004에서 myStyle 찾습니다.

일반적으로 동일한 요소의 다른 지침에 따라 분리 범위를 만들 지시어를 사용하지 않습니다. 몇 가지 옵션이 있습니다.

1. 지시어에 격리 범위 대신 scope: true을 사용하십시오. 그런 다음 ng 스타일이 범위 004에서 myStyle을 찾고 찾지 못하면 파선을 따라 아래 그림과 같이 부모 범위에서 찾습니다.
   
2. ng-style="$parent.myStyle"을 HTML에서 사용하십시오. 상위 범위의 myStyle 속성에 액세스합니다 (즉, 첫 번째 그림의 회색 선을 따라).