accessing scope variable from directive angularjs

Question

I made a directive to display a script tag in my view:

angular.module 'app'
.directive 'kwankoScript', ->
  restrict: 'E'
  replace: true
  template: '<script type="text/javascript">
    window.ptag_params = {
    zone: "transaction",
    transactionId: "id",
    currency: "EUR",
    customerId: "' + scope.user.uuid + '",
    siteType: "d"
    };
    </script>'

I call this directive from my view dashboard-validate.html like so:

<kwanko-script></kwanko-script>

I can access {{transaction.uuid}} from the view, but I cannot from my directive.

I would like to replace transactionId: "id" by `transactionId: "{{transaction.uuid}}" but it doesn't work.

any help would be greatly appreciated.

UPDATED :

this is my directive now:

 angular.module 'paycarApp'
.directive 'kwankoScript', ->

  restrict: 'E'
  replace: true
  scope: 
    transaction-id: "="
  template: '<script type="text/javascript">
    window.ptag_params = {
    zone: "transaction",
    transactionId: {{ transaction-id }},
    currency: "EUR",
    customerId: "' + scope.user.uuid + '",
    siteType: "d"
    };
    </script>'

and my view:

 <kwanko-script transaction-id="{{transaction.uuid}}"></kwanko-script>

If I don't put the curly braces, the directive is not executed

and this is the output

 <script type="text/javascript" transaction-id="" class="ng-scope"> 
    window.ptag_params = { 
    zone: "transaction", 
    transactionId: {{ transaction-id }}, 
    currency: "EUR",
    customerId: "7514c32b-0aec-1b00-a52d-e676ff62e297",
    siteType: "d" };
</script>

It looks like that angular (/jqlite) cannot cope with script tags inside a template. It can however cope with it if you include jquery before angular — devqon
– devqon, Commented Apr 12, 2016 at 8:38
I've tried by replacing the script in the template by a simple <div> and that still doesn't work. can I maybe send you a direct message ? — Mike W
– Mike W, Commented Apr 12, 2016 at 8:45
indeed that works fine. If I try to pass {{user.uuid}} it doesn't work anymore. is there a reason for that ? — Mike W
– Mike W, Commented Apr 12, 2016 at 9:05
Yes I use on the scope userId: "=", which means it will allready evaluate the variable and therefore the {{}} aren't necessary anymore. — devqon
– devqon, Commented Apr 12, 2016 at 9:08

devqon · Accepted Answer · 2016-04-12 08:16:31Z

1

Use the scope variable for this in your directive, where you can define which properties you want to bind to your directive. Make your directive like this:

angular.module 'app'
    .directive 'kwankoScript', ->

    restrict: 'E'
    replace: true
    template: '<script type="text/javascript">
        window.ptag_params = {
        zone: "transaction",
        transactionId: {{ transactionId }},
        currency: "EUR",
        customerId: {{ userId }},
        siteType: "d"
        };
        </script>'
    scope: {
        transactionId: "=",
        userId: "="
    }

Then do in your view:

<kwanko-script user-id="user.uuid" transaction-id="transaction.uuid"></kwanko-script>

edited Apr 12, 2016 at 8:16

answered Apr 12, 2016 at 8:11

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike W Over a year ago

this doesn't evaluate {{ transaction-id }}

<script type="text/javascript" transaction-id="" class="ng-scope"> window.ptag_params = { zone: "transaction", transactionId: {{ transaction-id }}, currency: "EUR", customerId: "undefined", siteType: "d" }; </script>

devqon Over a year ago

Lose the -id and make it transactionId (camelcasing) in your template, like in my given code

devqon Over a year ago

It looks like that angular (/jqlite) cannot cope with script tags inside a template. It can however cope with it if you include jquery before angular

Vipul · Accepted Answer · 2016-04-12 08:17:28Z

0

You will have to pass scope data from controller to the directive scope. Ideally the scope of controller and directive are not isolated and hence we just need to bind them In View > pass controller scope uuid to the directive as shown below

<kwanko-script tid = "transaction.uuid"></kwanko-script>

In JS code > We need to make the directive aware of how to make use of controller scope data

app.directive 'kwankoScript', ->
  restrict: 'E'
  replace: true
  scope: {
         tid : '='
  }
  template: '<script type="text/javascript">
    window.ptag_params = {
    zone: "transaction",
    transactionId: {{tid}},
    currency: "EUR",
    customerId: "' + scope.user.uuid + '",
    siteType: "d"
    };
    </script>'

answered Apr 12, 2016 at 8:17

Vipul

2,1512 gold badges16 silver badges12 bronze badges

2 Comments

Mike W Over a year ago

this doesn't work. I've tried that already. I see transactionId: {{tid}}

Vipul Over a year ago

Did you add the code scope: { tid : '=' } inside the directive as shown above

Collectives™ on Stack Overflow

accessing scope variable from directive angularjs

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related