AngularJS template variables not rendering when inside custom directive

Question

I'm having an issue with a custom angular directive. Basically, in the example below, the variable "name" will render correctly if outside of the scope of the directive, but not when inside the directive.

Template:

<div ng-controller="swygController">
  <div swyg="example" edit="load(id)">
    {{name}}
  </div>
  {{name}
</div>

Directive:

swyg.directive('swyg', function(){
  return {
    restrict: 'A',
    scope: {
      edit: '&'
    },
    compile: function(elm, attr){
      // Code
    },
    controller: function($scope, $element, $attrs) {
     // Code
    }
  };
});

I've tested this with the compile and controller directive functions empty (to rule out something in my directive causing the issue) and get the same result.

I'm fairly certain it's a scope issue, but can't figure out how to resolve it. It seems like I somehow need to allow the directive to inherit the controller's scope? I assumed since the directive is inside the controller, it'd be fine.

Has anyone else run into this?

Thanks for your help!

bekite bekite · Accepted Answer · 2013-10-26T21:43:21

scope: { }

creates an isolated scope, meaning you can not access the parent scope and everything defined on it.

You could use $parent.name to access the parent scope name variable. But I wouldn't recommend traversing the scope using $parent.

Instead pass the name as an attribute to your directive.

I've created a plunker to demonstrate how to do this: http://plnkr.co/edit/NGNMfkgNMooq0Sul6HPH?p=preview

AngularJS template variables not rendering when inside custom directive

2 Answers