AngularJs指令 - <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

Answer 2

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)
    };
});

Answer 3

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

Answer 4

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 */ });
    }
  };
});