待辦事項列表需要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秒纔會出現

回答

相關問題