Question

我正在使用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秒？

Answer 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错误。

要在digest-aware和digest-unaware调用上下文中安全地触发摘要，可以使用$evalAsync方法：

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

Todo列表需要30秒才能显示

1 个答案: