ng-repeat 后的触发函数 [英] trigger function after ng-repeat

问题描述

我是 Angular 的新手，我想做一个非常基本的例子.使用 ng-repeat 显示一些数据后，我想将其中一些数据与 javascript 函数一起使用.但我不知道什么时候执行 javascript，因为我不知道 angular 什么时候完成显示我的数据.

这是一个小提琴:我尝试使用函数 getAssign3<显示警报/code> Angular 显示的一些数据.我应该什么时候调用这个函数?

代码:

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

更多代码:

var test = angular.module("Test", []);function AssignmentCtrl($scope, $http, $timeout) {$scope.fetch = 函数 () {//-- 模拟服务器数据..var data = [{id: 1,title: "Math 1",},{id: 2, title: "数学 2",}, { id: 3,title: "数学 3",}];$scope.assignments = 数据；};$scope.fetch();}getAssign3 = 函数(){var dd = $("#3").text();警报(dd)；}getAssign3();

解决方案

你必须在你的控制器中添加一个 $on 捕捉器:

$scope.$on('ngRepeatFinished'), 函数 (ngRepeatFinishedEvent) {console.log "循环后";}

app.js 中的指令:

.directive('onFinishRender', function($timeout) {返回 {限制:'A'，链接:函数(范围，元素，属性){如果(范围.$last){返回 $timeout (function() {scope.$emit 'ngRepeatFinished'});}}})

在您看来:

on-finish-render="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-repeat 后的触发函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！