javascript - 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>

可以在指令的 Controller 中很好地实现。这将允许您在运行 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);
      }

    }
  };
});

希望对你有帮助