How to get two way data binding in a directive *without* an isolate scope?

Question

Using `scope: { ... }` in a directive introduces an isolate scope, which does not prototypically inherit from its parent scope. But I have always used it for a different reason: a convenient way to declare HTML attributes with two way data binding: ``` scope: { attr1: '=', attr2: '?=' } ``` To get a non-isolate scope, you have to use `scope: true`, which does not offer the opportunity to declare such attributes. I now find myself needing a directive with a non-isolate scope, but with two way binding. What's the best way to achieve this? Example: My use-case is something like this, in the view of the `outer-directive`: ```

``` But `inner-directive` is in the same module as `outer-directive`. It doesn't need to be encapsulated with an isolate scope. In fact, I need to use `$scope` inheritance for other purposes, so an isolate scope is not an option. It's just that using an HTML attribute to…

Accepted Answer

The answer by pixelbits helped me figure this out big time, but taken as a direct answer to my original question, it seems overly complicated. After looking into it, the solution is really quite simple.

Take a directive with an isolate scope like this:

```
scope: { model: '=myModel' },
link: function(scope, element, attr) {
    //...
}
```

The following is equivalent, except that the scope is not isolate:

```
scope: true,
link: function(scope, element, attr) {
    scope.model = scope.$parent.$eval(attr.myModel);
    //...
}
```

See a working example here: http://jsfiddle.net/mhelvens/SZ55R/1/

How to get two way data binding in a directive without an isolate scope?

Solution

Problem

Related problems