how to mix and match local variables and imported variables in a directive
angularjs, javascript
Solution
The properties applied to the element (via `ng-class`) come from the external scope. The scope properties you define in link are internal and get applied to the directive's template. So obviously the outside scope can't view the properties on the internal and isolated scope.
Instead of doing this, create a template for your directive and apply ng-class there.
template: '<div ng-class="{active:directiveDefinedVar}">...</div>'
Problem
in angular.js a directive can use all the variables defined in its parent's scope like so: ``` .directive('directiveName', ()-> scope: true ``` similarly, a directive can simply ignore its parents scope and define it's own like so ``` .directive('directiveName', ()-> scope: false ``` further, a directive can chose to "isolate" specific variables it wishes to use from its parent scope like so: ``` .directive('directiveName', ()-> scope: parentScopeVar1: '=' localVarAliasOfParentVar2: '=parentVar2' ``` the catch here is that these isolated variables must be declared in the html syntax of the directive like so: ``` <directiveName parent-scope-var-1="parentScopeVar1" parent-var-2="parentVar2" /> ``` question: I noticed that if i use the isolate method.. i can no longer use my directive defined variables in the html, for example suppose i have ``` .directive('directiveName', ()-> scope: parentScopeVar1: '=' .. link: (scope, elem, attrs) -> scope.directiveDefinedVar = true ``` and in the html: ``` <directiveName ng-class="{active:directiveDefinedVar}" /> <!-- This doesn't work! it used to work when I had scope: false --> ``` any idea why this is happening? the only way i can get around this is by persisting the value of parentScopeVar1 to a service.. then setting a watcher on it in the body of my directive like so: ``` .directive('directiveName', 'parentScopeVar1Cache',(parentScopeVar1Cache)-> .. link: (scope, elem, attrs) -> scope.parentScopeVar1Cache = parentScopeVar1Cache scope.$watch 'parentScopeVar1Cache', (newValue)-> # do stuff with newValue ``` but i find that solution too dirty.. i would like to do it simply from the scope definition like in my first three examples..