AngularJs指令 - <script> inside template

Question

我有一个带模板的指令，在这个模板中我有一个<script>标签，使用该指令的变量。

指示：

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

      }
    })();

模板：

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

用法：

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

问题是<script>标记内的{{vm.inputId}}未被过滤，因此{{vm.inputId}}不会成为“myInput”。 一切都在<script>标记之外， id: {{vm.inputId}}变为id: myInput

是不是可以将“变量”放在脚本标记中？

Answer 1

实现的代码片段

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

可以在指令的控制器中很好地实现。 这将允许您运行javascript代码，可以访问您的变量。

例如，你可以这样：

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

    }
  };
});

我希望这有帮助

Answer 2

我不建议在模板中使用<script>标签。

如果要在加载视图时记录inputId的值，则可以使用ngInit指令。

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

并将日志功能添加到控制器中的范围：

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

Answer 3

好吧， jQlite不支持模板中的脚本标记 。 jQuery可以，所以如果你需要这个功能，建议包括jQuery。

进一步，

即使您在模板中使用<script>标记，其中的代码也会在 angular的上下文之外执行。 因此，您将无法访问模板文件中<script>标记内控制器范围内的任何变量。 这基本上意味着，做类似的事情

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

是不可能的，因为更新的vm，也没有inputId可用，你会得到一个错误声称Unexpected token {{

同样，你可以在控制器中编写相同的代码。 那么为什么要复杂化

如果您仍打算在模板中使用<script> ，那么这里有一个plunkr

Answer 4

只需在您的索引中包含库脚本和其余脚本（角度等）。

您仍然可以将datepicker包装在指令中 - 使用指令的link函数。 如果jQuery在您的项目中，您将可以访问链接函数的“element”参数上的所有jquery函数。

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