javascript - AngularJs Directive - <script> inside template - Stack Overflow

admin管理员组

文章数量:1317906

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('appponents')
        .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 bee "myInput". Everything works outside the <script> tag, id: {{vm.inputId}} bees id: myInput

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

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.ponents')
        .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 bee "myInput". Everything works outside the <script> tag, id: {{vm.inputId}} bees id: myInput

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

• javascript
• angularjs
• angularjs-directive
• angular-template

Share Improve this question Follow asked Jul 13, 2015 at 11:31 Lusk116Lusk116 1,05011 gold badge1010 silver badges1818 bronze badges 3

• Why do you need a script tag there? Just use your controller. – Cerbrus Commented Jul 13, 2015 at 11:36
• Please show the scipt tag code – RIYAJ KHAN Commented Jul 13, 2015 at 11:45
• 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 Commented Jul 13, 2015 at 12:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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

I would not remend 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)
    };
});

Well, jQlite does not support script tags in templates. jQuery does, so the remendation 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 plicate things

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

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

本文标签： javascriptAngularJs Directiveltscriptgt inside templateStack Overflow