Pass JSON Object to angular directive

Question

I am trying to pass json object to angular directive but can't find any solution yet.

here is the code.

Directive

 function agEcalendar() {
    var directive = {
      restrict: 'E',
      templateUrl: 'app/components/ecalendar/ecalendar.html',
      scope: {
          event: '@event'
      },
      controller: EcalendarController,
      controllerAs: 'vm',
      bindToController: true
    };

    return directive;
  }

and here i am calling the directive in jade

ag-ecalendar(event='{{vm.calendar.event}}')

What are you trying to accomplish with this directive? Should the `controller` be in quotes? `controller: "EcalendarController"` — Hanlet Escaño, May 18 '16 at 14:35

Pankaj Parkar · Answer 1 · 2016-05-18T14:58:09.263

4

Do pass object using <(new one way binding options) which will give you ability to pass object to directive isolated scope.

scope: {
    event: '<event'
},

HTML

ag-ecalendar(event='vm.calendar.event')

In current case it is getting passed with @ is nothing but converting object value to string.

Note The suggested way would work for Angular 1.5+ version, otherwise you need to make it as event: '=event'(eventually that will enable two way binding)

edited May 18 '16 at 14:58

answered May 18 '16 at 14:37

Pankaj Parkar

134,766
23
234
299

@AhmadAbbasi is it really angular version? did you try what I told you? – Pankaj Parkar May 18 '16 at 14:45
@AhmadAbbasi you must have looking somewhere else, angular has `1.5.5` as latest version which they had released recently – Pankaj Parkar May 18 '16 at 14:47
ohh my bad. its v1.5.2 – Ahmad Abbasi May 18 '16 at 14:49
@AhmadAbbasi lets try what I've suggest, & let me know if it works or not – Pankaj Parkar May 18 '16 at 14:49
when i try '<' or '=', it gives me this error "Syntax Error: Token '{' invalid key at column 2 of the expression [{{vm.calendar.event}}] starting at [{vm.calendar.event}}]." – Ahmad Abbasi May 18 '16 at 14:56
@AhmadAbbasi look at the updated answer.. I forget to mention the html code, – Pankaj Parkar May 18 '16 at 14:58
now when i try to retrieve the value of event, it says event: undefined – Ahmad Abbasi May 18 '16 at 15:02
Could you add plunkr with issue, I'll look at it – Pankaj Parkar May 18 '16 at 16:38
@AhmadAbbasi could you add plunkr please, with reproducable problem? – Pankaj Parkar May 19 '16 at 07:35

Pass JSON Object to angular directive

1 Answers1