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!
