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

问题描述

问 题

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

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

                <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>

    </div>
</div>

然后再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等等的操作都进行完成后再调用初始化函数啊？

谢谢

解决方案

使用ng-init

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

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

这篇关于javascript - 如何在angular把DOM加载完成后再调用指定函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！