待办事项列表需要 30 秒才能出现答案

【问题标题】：Todo list takes 30 seconds to appear待办事项列表需要 30 秒才能出现
【发布时间】：2017-03-05 16:28:43
【问题描述】：

我正在使用 Angular 1.5.8。我在组件中有一个组件。父组件有一个带有ng-show 的div，它决定子组件应该何时出现。

父组件...

function ScheduleController() {
    var ctrl = this;
    ctrl.openTodo = function() {
        ctrl.isTodoVisible = true;
    }
}

angular.module('myApp').component('userTodoDisplay', {
    template: `
    <button click="ctrl.$openTodo()"></button>
    <div class="my-todo" ng-show="$ctrl.isTodoVisible">
        <eb-todo schedule-id="$ctrl.selectedScheduleId" connected-to-project="$ctrl.selectedScheduleConnectedToProject"
                 permissions="$ctrl.User.Role" close-click="$ctrl.closeTooltip()"></eb-todo>
    </div>
    `,
    controller: [UserTodoDisplayController]
});

将isTodoVisible 设置为true 后，以下子组件需要将近30 秒才会出现。

function TodoController() {
    //
}

angular.module('myApp').component('ebTodo', {
    bindings: {
        scheduleId: '<',
        connectedToProject: '<',
        statuses: '<',
        permissions: '<',

        detailsClick: '&',
        printClick: '&',
        editClick: '&',
        shareClick: '&',
        deleteClick: '&',
        copyClick: '&',
        toggleConnectClick: '&',
        setStatusClick: '&',
        closeClick: '&'
    },
    template: `
        <div>
            <button ng-click="$ctrl.closeClick()">Close</button>

            <button class="glyphicon glyphicon-th-list" ng-show="$ctrl.permissions.CanViewTask"
                ng-click="$ctrl.detailsClick({data: $ctrl.scheduleId})"></button>

            <button class="glyphicon glyphicon-print" ng-show="$ctrl.permissions.CanViewTask"
                ng-click="$ctrl.printClick({data: $ctrl.scheduleId})"></button>

            <button class="glyphicon glyphicon-pencil" ng-show="$ctrl.permissions.CanEditTask"
                ng-click="$ctrl.editClick({data: $ctrl.scheduleId})"></button>

            <button class="glyphicon glyphicon-envelope" ng-show="$ctrl.permissions.CanEditTask"
                ng-click="$ctrl.shareClick({data: $ctrl.scheduleId})"></button>

            <button class="glyphicon glyphicon-trash" ng-show="$ctrl.permissions.CanDeleteTask"
                ng-click="$ctrl.deleteClick({data: $ctrl.scheduleId});"></button>

            <button ng-show="$ctrl.permissions.CanAddTask"
                ng-click="$ctrl.copyClick({data: $ctrl.scheduleId})">Copy</button>

            <button ng-show="$ctrl.connectedToProject" ng-click="$ctrl.toggleConnectClick({data: $ctrl.scheduleId})">Disconnect</button>
            <button ng-hide="$ctrl.connectedToProject" ng-click="$ctrl.toggleConnectFromTooltip({data: $ctrl.scheduleId})">Connect</button>
        </div>
    `,
    controller: [ScheduleTooltipController]
});

我在 SO 上看到过与此类似的其他问题，但这些问题涉及 ngAnimate。我不使用 ngAnimate。

我创建所有其他组件的方式与创建此组件的方式相同。现在我正在使用ng-show，我只是无法让组件出现。为什么ebTodo 组件需要大约。在我将isTodoVisible 设置为true 30 秒后出现？

【问题讨论】：

DevTools 可能会提供帮助： 1. 您可以生成配置文件。 2. 您可以在浏览器工作时点击暂停，这样您就可以看到堆栈并检查它正在做什么。
@joeytwiddle 好主意。试过了。看起来浏览器在我录制时做了很多工作，但我不确定如何处理这些信息。
您是在 ng-repeat 中渲染它吗？将isTodoVisible 设置为true 后，我会尝试$timeout(function() {$scope.$apply();})。
短语角度组件“发生”在常规角度周期之外没有意义。 isTodoVisible 值是在摘要循环之外异步设置的，就这么简单。由于您没有显示发生这种情况的位置，因此该问题无法得到令人满意的答案。
我猜你的意思是<button onclick=... 只需使用ng-click 而不是onclick。 ng-click 所做的只是用 $apply 包装事件侦听器，这样的情况存在。

标签： javascript angularjs components

【解决方案1】：

对于 Angular 中的常见异步操作，有一些可识别摘要的替代方法。对于模板中的点击事件ng-click 指令很方便：

<button ng-click="$ctrl.openTodo()">

对于从不知道范围摘要（第三方代码）的地方异步调用的回调，应使用范围$apply 方法手动触发摘要：

ctrl.openTodo = function() {
    $scope.$apply(function () {
        ctrl.isTodoVisible = true;
    });
}

这种方法可能与摘要感知调用者不兼容（例如ng-click）。摘要循环将被触发两次并导致$rootScope:inprog Action Already In Progress 错误。

为了在摘要感知和摘要不感知调用上下文中安全地触发摘要，可以改用$evalAsync 方法：

ctrl.openTodo = function() {
    $scope.$evalAsync(function () {
        ctrl.isTodoVisible = true;
    });
}

【讨论】：