Is it possible to render angular directive templates with isolated scope?

Question

I came across a strange behavior with an angular directive using an isolated scope. Apparently the template is resolved using the old scope (even if transcluded), not the new one.

This sounds a bit odd as it violates the 'isolation' of the directive's scope

The html :

<div ng-app="myApp">
  <div ng-controller="MyController">
    out prop = {{prop}}
    <div my-directive prop="'valueIN'">
      in prop = {{prop}}
    </div>
  </div>
</div>

The js

function MyController($scope) {
  $scope.prop = 'valueOUT';
}

angular.module('myApp',[]).directive('myDirective', function() {
  return {
    scope: { prop: '=' }
  };
});

This outputs :

Angular 1.1

out prop = valueOUT
in prop = valueIN

Angular 1.2

out prop = valueOUT
in prop = valueOUT

which sounds weird to me... Also got the same behavior with transcluding the template.

Is it possible to get the 1.1 behavior in 1.2 ?

Corresponding fiddle : https://jsfiddle.net/4s1fxjmq/

dfsq dfsq · Accepted Answer · 2017-05-17T10:40:12

One way is to recompile element in proper scope:

.directive('myDirective', ['$compile', function($compile) {
  return {
    scope: {
      prop: '='
    },
    link: function(scope, element, attr) {
      attr.$set('myDirective', null)
      $compile(element)(scope)
    }
  }
}])

Is it possible to render angular directive templates with isolated scope?

1 Answers