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?

Answer 1

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