后触发功能NG-重复 [英] trigger function after ng-repeat

问题描述

我新的角度，我愿做一个非常基本的例子。
以显示某些数据后纳克重复，我想用一些这些数据的使用JavaScript功能。但我不知道什么时候执行JavaScript，因为我不角何时会结束，显示我的数据。

这里是一个小提琴：我尝试以示与功能 getAssign3 通过角显示的一些数据。什么时候应该调用此函数？

code：

 ＆LT; D​​IV NG-应用=测试＆GT;
    ＆LT; H1＆GT;结果表＆LT; / H1＆GT;
    ＆LT; D​​IV NG控制器=AssignmentCtrl＆GT;
          ＆LT;跨度NG重复=分配在分配＆GT;
             ＆所述;跨度的id ={{assign.id}}＆GT; {{assign.title}}＆下; /跨度＆GT;
              ＆LT; BR /＆GT;
        ＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js\"></script>
 

更多code：

  VAR测试= angular.module（测试，[]）;功能AssignmentCtrl（$范围，$ HTTP，$超时）{
    $ scope.fetch =功能（）{
        //  - 模拟服务器数据..
        VAR数据= {[ID：1，名称：数学1
                    }，{ID：2，标题：数学2
                    }，{ID：3，标题：数学3
                    }];
         $ scope.assignments =数据;
    };
    $ scope.fetch（）;
}getAssign3 =功能（）{
    VAR DD = $（＃3）文本（）。
    警报（DD）;
}
getAssign3（）;
 

解决方案

您必须在您的控制器上添加一个捕手$：

  $范围。在$（'ngRepeatFinished'），功能（ngRepeatFinishedEvent）{
      CONSOLE.LOG环后;
}
 

在app.js一个指令：

  .directive（'onFinishRender'，函数（$超时）{
    返回{
      限制：'A'，
      链接：功能（范围，元素，属性）{
        如果（范围。$最后一个）{
          返回$超时（函数（）{
            范围。$发出ngRepeatFinished
          }）;
       }
    }
}）
 

和在您的视图：

 上完成渲染=myFunc的（）
 

I am new to Angular, and I would like to do a really basic example. After displaying some data with a ng-repeat, I would like to use some of those data with javascript functions. But I don't know when to execute the javascript, because I don't when angular will finish to display my data.

Here is a fiddle: I try to show an alert with the function getAssign3 some data displayed by Angular. When should I call this function ?

Code:

<div ng-app="Test">
    <h1>Results Table</h1>
    <div ng-controller="AssignmentCtrl">
          <span ng-repeat="assign in assignments">
             <span id="{{assign.id}}">{{assign.title}}</span>
              <br/> 
        </span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>

More code:

var test = angular.module("Test", []);

function AssignmentCtrl($scope, $http, $timeout) {
    $scope.fetch = function () {
        // -- Mock server data..
        var data = [{id: 1,title: "Math 1",
                    },{id: 2, title: "Math 2",
                    }, { id: 3,title: "Math 3",
                    }];
         $scope.assignments = data;
    };
    $scope.fetch();
}

getAssign3 = function(){
    var dd = $("#3").text(); 
    alert(dd);
}
getAssign3();

解决方案

You have to add a $on catcher in your controller:

$scope.$on('ngRepeatFinished'), function (ngRepeatFinishedEvent) {
      console.log "After loop";
}

A directive in your app.js:

.directive('onFinishRender', function($timeout) {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        if (scope.$last) {
          return $timeout (function() {
            scope.$emit 'ngRepeatFinished'
          });
       }
    }
})

and in your view:

on-finish-render="myFunc()"

这篇关于后触发功能NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！