CODEWITHSUNDEEP
angularjs
Mike W
Mike W

Reputation: 401

accessing scope variable from directive angularjs

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>

Upvotes: 0

Views: 91

Answers (2)

Vipul
Vipul

Reputation: 2141

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>'

Upvotes: 0

devqon
devqon

Reputation: 13997

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>

Upvotes: 1

Related Questions