待办事项列表需要30秒才会出现

我正在使用Angular 1.5.8。我有一个组件内的组件。父组件有一个与ng-show的div，它决定何时应该出现子组件。待办事项列表需要30秒才会出现

父组件...

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] 
});

下面的子组件需要近30秒出现一次我设置isTodoVisible到true。

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

来源

2016-10-24 Targaryen

的DevTools可能能够帮助：1.您可以生成一个配置文件。 2.在浏览器工作时，您可以点击暂停，以便您可以看到堆栈并检查它正在执行的工作。 – joeytwiddle

@joeytwiddle好主意。试过了。看起来浏览器在我录制时做了很多，但我不确定如何处理这些信息。 – Targaryen

你是否在ng-repeat中渲染它？将'isTodoVisible'设置为true后，我会尝试'$ timeout（function（）{$ scope。$ apply（）;}）'。 –

在Angular中有通用的异步操作的摘要感知替代方案。对于模板点击事件ng-click指令是方便：

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

对于被异步从没有意识到范围摘要（第三方代码）的地方调用回调，摘要应手动范围$apply方法触发：

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

此方法可能与意识到摘要的呼叫者不兼容（例如ng-click）。 Digest循环将被触发两次，并导致$rootScope:inprog Action Already In Progress错误。

要安全地触发消化消化这两种感知和消化，不知道叫上下文，$evalAsync方法可以用来代替：

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

来源

2016-10-24 19:24:41 estus

待办事项列表需要30秒才会出现

回答

相关问题