Sinetheta
Sinetheta

Reputation: 9449

How to pass dynamic values into an Angular directive?

Data-binding to a directive's attributes results in an error demo:

<div goo-progressbar value="{{progress}}"</div> 

Error: Syntax Error: Token 'progress' is unexpected, expecting [:] at column 3 of the expression [{{progress}}] starting at [progress}}]. at Error (<anonymous>)

Is there a way to pass in live values so that I can have a dynamic directive?

Upvotes: 3

Views: 4543

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

Two issues:

  • Don't pass {{progress}}, rather pass the correct variable:

    <div goo-progressbar value="progress"</div>
    

    The value: "=value" scope declaration implies that.

  • Do scope.$watch("value",...). The value is in scope, as defined with scope: {...}.

With these changes it will work.

Upvotes: 5

Related Questions