javascript - 如何在angular把DOM加载完成后再调用指定函数

Question

这是task.html这个网页片段：

<p ng-repeat="group in groups | orderBy:'index'" class="panel_wrapper col-sm-12 col-md-6 col-lg-4">
    <p class="panel panel-primary">
        <p class="panel-heading">
            <h3 class="panel-title">{{ group.groupname }} <span class="badge">{{ group.tasks.length }}</span></h3>
        </p>

                <table class="table table-hover">
                    <tbody>
                    <tr ng-repeat="task in group.tasks">
                        <td>
                            <input type="checkbox" name="quux[1]">
                        </td>
                        <td>
                            <h4>{{ task.title }}</h4>
                            <span class="label">{{ task.tasker_main }}</span>
                            <span class="label" ng-class="{'label-primary':task.urgency=='正常','label-warning':task.urgency=='紧急','label-danger':task.urgency=='火急'}">{{ task.urgency }}</span>
                            <span class="label">{{ task.ddl | date:'MM-dd' }}</span>
                            <span class="label"><span class="glyphicon glyphicon-thumbs-up"></span> {{ task.upvoters.length }}</span>
                        </td>
                    </tr>
                    </tbody>
                </table>

    </p>
</p>

然后再app.js用ui-router做了一个这样的路由：

$stateProvider
        .state('tasks', {
            url: "/tasks",
            templateUrl: "partials/tasks.html",
            controller:'ctrl_task'
        })
        .state('newtask', {
            url: "/newtask",
            templateUrl: "partials/newtask.html",
            controller:'ctrl_newtask'
        })
        .state('message', {
            url: "/message",
            templateUrl: "partials/message.html"
        })
        .state('state2', {
            url: "/state2",
            templateUrl: "partials/state2.html"
        })
        .state('state2.list', {
            url: "/list",
            templateUrl: "partials/state2.list.html",
            controller: function($scope) {
                $scope.things = ["A", "Set", "Of", "Things"];
            }
        });

因为用到了icheck这个插件（参考文档：http://www.bootcss.com/p/icheck/），所以需要再DOM加载完成后调用初始化函数，于是我想直接在task.html里加上这个script标签：

<script>
$(document).ready(function () {
    $('input').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
        increaseArea: '20%'
    });
});
</script>

然后发现icheck这个插件的效果并没有显示出来，但是如果<input type="checkbox" name="quux[1]">这个标签放在了ng-repeat的外面的话，就可以正常加载插件的效果，所以，我猜想应该是初始化函数的问题。

请问该如何在angular把ng-repeat等等的操作都进行完成后再调用初始化函数啊？

谢谢

Answer 1

使用ng-init

$scope.init = function() {
    // to do 
    
}

// html
<p ng-init="init()"></p>

Answer 2

首先，你不应该将jquery插件和angular混用，这样做的话就会出现许多你现在这样要处理的麻烦。

正确的做法是，你写一个directive，来完成你的插件需要做的事情，当然也可以去github上找一个合适的。

然后就你的问题本身，你需要在ng-repeat 结束以后 触发你的函数

可以参考这里的说法
http://stackoverflow.com/questions/15207...

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

在controller 中 监听

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    //you also get the actual event object
    //do stuff, execute functions -- whatever...
});

在页面上绑定

<p ng-repeat="item in items" on-finish-render="ngRepeatFinished">
    <p>{{item.name}}}<p>
</p>

他的做法其实也就是用一个directive 来监听 ng-repeat 是否结束。
但是我可以负责任的告诉你，即使你解决了ng-repeat 你还会有其他的逻辑中会遇到与之类似的问题。任何解决方法都将是治标不治本，迟早害人害己的。（我公司历史上所有将angular和jquery插件混用的都已经被解雇了）。