AngularJs 指令 - <script> 内部模板

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

难道不能将 "variables" 放在脚本标签中吗？

Answer 1

嗯，jQlite 不支持模板中的脚本标签。 jQuery 可以，因此如果您需要此功能，建议包含 jQuery。

此外，

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

的事情

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

是不可能的，因为更近的 vm 和 inputId 都不可用，你实际上会得到一个错误声明 Unexpected token {{

同样，您无论如何都可以在控制器中编写相同的代码。那么为什么要把事情复杂化

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

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

中实现的一段代码

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

只需将库脚本与其余脚本（angular 等）一起包含在您的索引中。

您仍然可以将日期选择器包装在指令中——使用指令的 link 函数。如果 jQuery 在您的项目中，您将可以访问 link 函数的 "element" 参数上的所有 jquery 函数。

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

AngularJs 指令 - <script> 内部模板

AngularJs Directive - <script> inside template

javascript

angularjs

angularjs-directive

angular-template