templateURL in directive breaks interpolation in $observe

[joshdmiller]

When using the templateUrl property, attrs.$observe will no longer interpolate values. See the following example (also in this plunker):

.directive( 'testDir', [ function () {
  return {
    restrict: 'A',
    scope: true,
    templateUrl: 'template.html',
    //template: "<span>{{testAttr}}</span>",
    link: function( scope, element, attrs ) {
      attrs.$observe( 'testDir', function ( val ) {
        console.log("attr changed to", val);
        scope.testAttr = val;
      });
    }
  };
}]);

This will work if either (a) template is used instead of templateUrl; or (b) an isolate scope with an '@' binding is used instead.

I cannot explain this behavior, so I am opening this issue. Thanks!

[IgorMinar]

this does look like a weird bug.

I debugged it a bit and the reason why this is happening is that the testDir directive is observing different instane of Attributes than then one that the interpolation is registered with. So somehow we are creating two instances of the Attributes object of this single element. I don't yet know why that's the case, but this is the issue that needs to be fixed.

[IgorMinar]

ok, here is the culprit:

angular.js/src/ng/compile.js

Line 941 in 649b892

afterTemplateNodeLinkFn = applyDirectivesToNode(directives, $compileNode, tAttrs, childTranscludeFn);

we should be calling applyDirectiveToNode with compileNode and not $compileNode.

does anybody want to take it from here and write a test for this and send a PR?

[iknite]

Hi, I can't make the this test catch the bug, It passed but I think it's about letting the $rootScope.$apply() do the compilation.

Any directions are gladly appreciated :)

it('should support $observe inside link function on directive object', function(){
  module(function() {
    directive('testLink', valueFn({
      link: function(scope, element, attrs) {
        attrs.$observe( 'testLink', function ( val ) {
          scope.testAttr = val;
        });
      }
    }));
  });
  inject(function($compile, $rootScope) {
    element = $compile('<div test-link="{{1+2}}">{{testAttr}}</div>')($rootScope);
    $rootScope.$apply(); //what's the right way to process the directive?
    expect(element.text()).toBe('3');
  });
});

[IgorMinar]

@iknite you have to use templateUrl in your testLink directive

[IgorMinar]

templateUrl: test-link.html

...

inject(function($compile, $rootScope, $templateCache) {
  $templateCache('test-link.html', '{{testAttr}}');
  element = $compile('<div test-link="{{1+2}}"></div>')($rootScope);
  ...

[jingman]

This issue comes back (plunker) when you add replace: true to the directive.

[IgorMinar]

Hmm.. OK, we'll investigate.