javascriptangularjsangularjs-directiveangularjs-ng-transclude

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


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/


Solution

  • 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)
        }
      }
    }])