ng-repeat在脚本块中不起作用

时间:2022-12-02 15:45:23

I need to call a js function when an ng-repeat template is created:

我需要在创建ng-repeat模板时调用js函数:

<div ng-repeat="item in items">
  <input id="ip{{item.id}}">
  <script>$(function () { $('#ip{{item.id}}').kendoDatePicker(); });</script>
</div>

The id is replaced as expected, but angular doesn't seem to work inside script tags.

id按预期替换,但angular似乎在脚本标记内不起作用。

1 个解决方案

#1


2  

That is correct, Angular will not evaluate expressions in script tags. You will need to use a directive that will initialize the Kendo plugin for each element.

这是正确的,Angular不会评估脚本标记中的表达式。您将需要使用一个指令来为每个元素初始化Kendo插件。

The good news is Kendo already has a module for integrating with Angular, so you might as well just use that. Here is a plunk I put together showing it in a repeater.

好消息是Kendo已经有一个与Angular集成的模块,所以你不妨使用它。这是我把它放在一个转发器中的插件。

<div ng-repeat="item in items">
  <label for="{{item.id}}">{{item.id}}</label>
  <div>
    <input kendo-date-picker ng-model="item.value" />
  </div>
</div>

Controller:

angular.module("demo", ['kendo.directives'])
  .controller('DemoCtrl', ['$scope',
    function($scope) {
      $scope.items = [{
        id: 'item1',
        value: null
      }, {
        id: 'item2',
        value: null
      }, {
        id: 'item3',
        value: null
      }, {
        id: 'item4',
        value: null
      }];
    }
  ]);

#1


2  

That is correct, Angular will not evaluate expressions in script tags. You will need to use a directive that will initialize the Kendo plugin for each element.

这是正确的,Angular不会评估脚本标记中的表达式。您将需要使用一个指令来为每个元素初始化Kendo插件。

The good news is Kendo already has a module for integrating with Angular, so you might as well just use that. Here is a plunk I put together showing it in a repeater.

好消息是Kendo已经有一个与Angular集成的模块,所以你不妨使用它。这是我把它放在一个转发器中的插件。

<div ng-repeat="item in items">
  <label for="{{item.id}}">{{item.id}}</label>
  <div>
    <input kendo-date-picker ng-model="item.value" />
  </div>
</div>

Controller:

angular.module("demo", ['kendo.directives'])
  .controller('DemoCtrl', ['$scope',
    function($scope) {
      $scope.items = [{
        id: 'item1',
        value: null
      }, {
        id: 'item2',
        value: null
      }, {
        id: 'item3',
        value: null
      }, {
        id: 'item4',
        value: null
      }];
    }
  ]);