CODEWITHSUNDEEP
javascriptangularangular2-directives
Arūnas Smaliukas
Arūnas Smaliukas

Reputation: 3321

Angular2 Directive with scope

Directives in Angular2 do not have "scopes", while Components do. But in my case I need Directive to create a scope. Look at my App component - it has an HTML template, and ANYWHERE on any element the foo directive could appear. This should grab some date from service and assign it to the Element.

In Angular1 it was very easy... Directives could have its own scope. But in Angular 2 I cannot find any (even dirty) way to achieve that.

It looks like a simple task, doesn't it?

@Directive({
  selector: '[foo]'
})
class FooDirective {
  @Input()
  public id:string;

  public bar;

  constructor() {
     this.bar = 'This is the "bar" I actually need. It is taken from DB let's say..' + this.id;
  }
}




@Component({
  selector: 'app',
  template: `
     <div foo id="2">
       This is random content 1: {{bar}}
     </div>

     <div foo id="2">
       This is random content 2: {{bar}}
     </div>
  `,
  directives: [FooDirective]
})
class App {
  bar:string = 'This should be ignored, I need "bar" to be set from directive!';
}

bootstrap(App);

Upvotes: 3

Views: 3457

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364677

What do mean when you say that components do have scope?

My understanding is that there is no shared object (or prototypal inheritance) between components. But I think that is what you are looking for -- you want FooDirective and App to share the same (scope) object, correct? If so, I don't think there is anything equivalent in Angular 2.

I doubt you'll like this, but the best I could come up with (that is different from @Thierry's approach) is to use the div as the "shared object" (rather than the directive). The directive uses HostBinding to save the value to a data attribute on the div, then the component retrieves that value in the template, using a local variable to get a reference to the div/shared object:

import {Component, Directive, Input, HostBinding} from '@angular/core';

@Directive({selector: '[foo]'})
class FooDirective {
  @Input() id:string;
  @HostBinding('attr.data-bar') bar;
  ngOnInit() {
     this.bar = 'This is "bar" I actually need. It is taken from DB lets say...' + this.id;
  }
}

@Component({
  selector: 'my-app',
  template: `{{title}}<p>
    <div #div1 foo id="2">
      This is random content 1: {{div1.getAttribute('data-bar')}}
    </div>`,
  directives: [FooDirective]
})
export class AppComponent {
  title = `Angular - RC.1`;
}

Plunker

I like @Thierry's approach better than what I show above, but I figured I would post what I was toying around with anyway.

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202146

You could try something like that leveraging a local variable that would reference the applied directive:

@Component({
  selector: 'app'
  template: `
    <div foo id="2" #dir1="foo">
      This is random content 1: {{dir1.bar}}
    </div>

    <div foo id="2" #dir2="foo">
      This is random content 2: {{dir2.bar}}
    </div>
  `,
  directives: [FooDirective]
})
class App {
  bar:string = 'This should be ignored, I need "bar" to be set from directive!';
}

In your case bar is evaluated using properties of the current component, the App one.

Edit (following the @yurzui's comment)

You need to add an exportAs property in your directive:

@Directive({
  selector: '[foo]',
  exportAs: 'foo'
})
class FooDirective {
  (...)
}

Upvotes: 5

Related Questions