Question

我在这样的元素上使用ng-repeat：

<div ng-repeat="aSize in BC.aOutputSizesArr" style="width:{{aSize}}px; height:{{aSize}}px;">
    {{aSize}}
    <canvas/>
    <script>alert({{aSize}})</script>
</div>

所以基本上在每次重复时，我需要根据aSize的值绘制到画布，是否可以在ng-repeat的每次迭代中执行一个函数？我尝试将script标记放在那里，但它不起作用。

Answer 1

这是我使用指令的意思example。

该指令：

angular.module('directives', []).directive('alerter', function () {
    return {
        model: {
            size: '@'
        },
        link: function ($scope, element, attrs, controller) {
            alert(attrs.size)
        }
    };
});

用过：

<alerter size=10>alert 10</alerter>
<alerter size=15>alert 15</alerter>

将执行。

Answer 2

您可以使用自定义指令或指令 ngInit 并从控制器传递一个函数。

该指令将在ngRepeat创建标记后执行。

<canva ng-init="function()"/> <!-- function from $scope -->

Answer 3

正如@Jorg所说，创建一个指令：

.directive('myCanvas', function(){
    return {
        scope: {
            size: '=size'
        },
        template: '<canvas></canvas>',
        link: function(scope, elem, attrs){
            alert(scope.size);
        }
    };
});

然后在ng-repeat

内

<div ng-repeat="aSize in BC.aOutputSizesArr">
    {{aSize}}
    <my-canvas size="aSize"/>
</div>

这很快写完了，未经测试，但希望你能得到这个想法。请记住，上面的示例只是一种绑定方式，具体取决于您对aSize的要求（可以动态更改等）。

Answer 4

<tr ng-repeat="app in appList" ng-init="getActivationFunction(app)"> <!-- function from $scope -->
    <td><h4> {{ app.Name }} </h4></td>
    <td> <img src="{{ app.ava_img }}"/> </td>
</tr>

在控制器中调用以下函数...

$scope.getActivationFunction = function(modelRecieve) {
  Service.getServiceDate(modelRecieve.name)
    .then(function(response) {
       var date = response.data.image;  
       $scope.app.ava_img = date;
     },
   // ...
};

在ng-repeat的每次迭代中执行脚本/函数

4 个答案: