AngularJs Directive - <script> inside template

Question

I have a directive with a template and inside this template I have a <script> tag using variables of the directive.

Directive:

    (function () {
      'use strict';

      angular
        .module('app.components')
        .directive('picker', Picker);

      /*@ngInject*/
      function Picker() {

        return {
          restrict: 'E',
          controller: PickerController,
          controllerAs: 'vm',
          bindToController: true,
          templateUrl: 'picker.html',
          transclude: true,
          scope:{
            inputId: '@'
          }
        };

        /*@ngInject*/
        function PickerController() {
          /*jshint validthis: true */
          var vm = this;
        }

      }
    })();

Template:

    <div>
      <div>
        id: {{vm.inputId}}
        <ng-transclude></ng-transclude>
      </div>
      <script>
        console.log({{vm.inputId}});
      </script>
    </div>

Usage:

    <picker input-id="myInput"> <!-- something... --> </picker>

The problem is that the {{vm.inputId}} inside the <script> tag isn't filtered so {{vm.inputId}} doesnt become "myInput". Everything works outside the <script> tag, id: {{vm.inputId}} becomes id: myInput

Is it just not possible to put "variables" inside a script tag?

Why do you need a script tag there? Just use your controller. — Cerbrus
– Cerbrus, Commented Jul 13, 2015 at 11:36
the idea was to wrap a jQuery datepicker inside a directive but keeping the directive more or less loose coupled from the wrapped datepicker. I put the datepicker, Button and so on into the template so I just have to change the template if I want to use another datepicker library but if I want to use this directive more than once inside one page I have to change Ids dynamically and the Ids are also in the script tag — Lusk116
– Lusk116, Commented Jul 13, 2015 at 12:33

robe007 · Accepted Answer · 2017-10-23 21:44:40Z

2

The piece of code that is implemented in

<script>
      console.log({{vm.inputId}});
</script>

can be well implemented inside your directive's controller. That will allow you to run the javascript code with the luxury of having access to your variables.

For example you can have this:

var app =  angular.module('myApp', [])

app.directive('testDirective', function(){
  return {
    restrict: 'E',
    template: '<p>Click in the text box</p>'+
              '<textarea id="my-area"></textarea>'+
              '<p>Click {{num_clicks}}</p>',
    controller: function($scope, $log){
      $scope.num_clicks = 0;
      $("#my-area").click(function(){
        incr();
      });
      function incr(){
        $scope.num_clicks = $scope.num_clicks + 1;
        $scope.$digest();
        $log.log("A click",   $scope.num_clicks);
      }

    }
  };
});

I hope this helps

edited Oct 23, 2017 at 21:44

robe007

4,0074 gold badges41 silver badges62 bronze badges

answered May 9, 2016 at 18:44

Patrick

1,1311 gold badge14 silver badges14 bronze badges

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

Comments

Buh Buh · Accepted Answer · 2015-07-13 12:41:15Z

1

I would not recommend using a <script> tag inside your template at all.

If you want to log the value of inputId at the moment the view is loaded then you could use the ngInit directive instead.

<div ng-init="log(vm.inputId)">
    id: {{vm.inputId}}
    <ng-transclude></ng-transclude>
</div>

and add the log function to your scope in the controller:

app.controller('myController', function($scope, $log) {
    $scope.log = function (message) {
        $log.log(message)
    };
});

answered Jul 13, 2015 at 12:41

Buh Buh

7,5262 gold badges38 silver badges64 bronze badges

1 Comment

Lusk116 Over a year ago

I don't want to log the value of vm.inputId, the console.log(..) is just an example.I planed something like $('#'+vm.inputId)..... putting everything into the controller fixed it :)

nalinc · Accepted Answer · 2015-07-13 12:12:42Z

0

Well, jQlite does not support script tags in templates. jQuery does, so the recommendation is to include jQuery if you need this functionality.

Further,

Even if you use the <script> tag in your template, the code within would be executed outside angular's context. So you would not be able to access any variable inside controller's scope in your <script> tag within the template file. This essentially means, doing something like

  <script>
    console.log({{vm.inputId}});
  </script>

is not possible, because neighter vm, nor inputId would be available and you would infact get an error claiming Unexpected token {{

Again, you could have written the same code in controller anyways. So why complicate things

If you still intend to use the <script> within your template, here's a plunkr

answered Jul 13, 2015 at 12:12

nalinc

7,43327 silver badges34 bronze badges

1 Comment

Lusk116 Over a year ago

the code within would be executed outside angular's context this answers my question :) I try to put everything into the controller if possible

William B · Accepted Answer · 2016-05-09 18:49:58Z

0

just include the library script with the rest of your scripts (angular etc) on your index.

You can still wrap the datepicker in a directive -- use the link function of the directive. if jQuery is in your project you will have access to all jquery functions on the "element" parameter of your link function.

angular.module('myModule').directive('datepicker', function () {
  return {
    link: function (scope, elem, attrs) {
      elem.jqdatepicker({ /* options */ });
    }
  };
});

answered May 9, 2016 at 18:49

William B

1,4198 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJs Directive - <script> inside template

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related