在自定义指令中时，AngularJS模板变量未呈现

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!

Answer 1

As soon as you declare scope within a directive it is then an isolated scope and therefore variables from parent scope are not the same.

There are several ways to approach:

One is using parent scope in expression. Nested scopes become nested in parent objects so you can do:

{{$parent.name}}

If nesting is 2 levels deep would be able to use $parent.$parent.name but this approach gets ugly

Or pass the variable to directive as an attribute, and include that in directive scope the same way you are doing with edit

Answer 2

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