how to separate scopes without isolate scope?

Question

Isolate scope is inconvenient because the directive stops inheriting from the parent scopes.

So right now when I want to use the same directive within the same scope I am using ng-if to separate the directive scopes like so:

<some-directive 
    ng-if="true"
    var1="'wtva'" 
    var2="{{wtv2a}}"
    var3="wtv2a" 
></some-directive>

<some-directive 
    ng-if="true"
    var1="'wtvb'" 
    var2="{{wtv2b}}"
    var3="wtv2b" 
></some-directive>

This way the attributes from both directives don't get mixed up without having to resort to isolate scope.

So far I haven't noticed any problems with this approach but it does look hacky.. Is there a better way to do this?

Answer 1

As mentioned in the comments you could use:

scope: true

However I would like to just point out one area of caution if you do take this approach: Any object based property on the scope, if the inherited (i.e. new scope) created by this directive changes a property on the object through 'dotting' (e.g. someObj.name = 'some new value') then this WILL be reflected in the parent scope as well. And example of this can be seen here:

http://plnkr.co/edit/A1hNG5EUr8vcCNOAEp7P?p=preview

As such I would agree that going with the isolate scope approach, passing in whichever properties you need through '@', '=', etc would be best.