Question

我有一个带有模板的指令，在这个模板中，我有一个＆lt; script＆gt; 标签，使用该指令的变量。

＆＃xA;＆＃xA;

指令：

＆＃xA;＆＃xA;

 （function（）{＆＃xA;'use strict';＆＃xA;＆＃xA; angular＆＃xA; .module（' app.components'）＆＃xA; .directive（'picker'，Picker）;＆＃xA;＆＃xA; / * @ ngInject * /＆＃xA; function Picker（）{＆＃xA;＆＃xA; return {＆＃xA; restrict：'E'，＆＃xA; controller：PickerController，＆＃xA; controllerAs：'vm'，＆＃xA; bindToController：true，＆＃xA; templateUrl：'picker.html'， ＆＃xA; transclude：true，＆＃xA;范围：{＆＃xA; inputId：'@'＆＃xA;}＆＃xA;};＆＃xA;＆＃xA; / * @ ngInject * /＆ #xA; function PickerController（）{＆＃xA; / * jshint validthis：true * /＆＃xA; var vm = this;＆＃xA;}＆＃xA;＆＃xA;}＆＃xA;}）（ ）;＆＃xA;

＆＃xA;＆＃xA;

模板：

＆＃xA;＆＃xA;

 ＆lt; div＆gt;＆ #xA; ＆LT; DIV＆GT;＆＃XA; id：{{vm.inputId}}＆＃xA; ＆LT; NG-transclude＆GT;＆LT; / NG-transclude＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT;脚本＆GT;＆＃XA;的console.log（{{vm.inputId}}）;＆＃XA; ＆LT; /脚本＆GT;＆＃XA; ＆lt; / div＆gt;＆＃xA;

＆＃xA;＆＃xA;

用法：

＆＃xA;＆＃xA;

 ＆lt; picker input-id =“myInput”＆gt; ＆lt;！ - 某事......  - ＆gt; ＆lt; / picker＆gt;＆＃xA;

＆＃xA;＆＃xA;

问题在于＆lt; script＆gt; <中的{{vm.inputId}} / code>标签未被过滤，因此{{vm.inputId}}不会成为“myInput”。一切都在＆lt; script＆gt; 标记之外， id：{{vm.inputId}} 变为 id：myInput

＆＃ xA;＆＃xA; 是否无法将“变量”放在脚本标记中？＆＃xA;

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包装在指令中 - 使用指令的angular.module('myModule').directive('datepicker', function () { return { link: function (scope, elem, attrs) { elem.jqdatepicker({ /* options */ }); } }; });函数。如果jQuery在您的项目中，您将可以访问＆＃34;元素＆＃34;上的所有jquery函数。链接功能的参数。

.jar

AngularJs指令 - 模板内的<script>

4 个答案: