0

次のようなAngularのタスクリストを作成しています

並べ替え可能なリスト マークアップ

<ol>        
    <li><form id="task_creation_form"></form></li>
    <li ng-repeat="task in tasks">{{task.name}}</li>        
</ol>

ご覧のとおり、フォームをドラッグすることもできます。これにより、フォームが$scope.tasksリストの一部ではないため、コントローラー内で変更が行われると、フォームがあちこちに配置されます。

これを回避するために、新しいタスクが作成されるたびに起動されるが、$scope.tasks配列に追加される前に、コントローラーでこのロジックを使用することになりました

$scope.$on('task_created', function(event, task){
        // Why the timeout?
        // When the task_created event is fired from the $scope, the tasks
        // property changes and the DOM get's updated. Thats is cool, but part
        // of the 'tasks' list, is the new task form that can also be reordered,
        // Therefore we need to detach it from the DOM, let the scope do it's digest and
        // reattach the form afterwards to it's proper position.
        // We wrap the entire thing in a setTimeout handler, so the $apply does not get 
        // automatically called and we force it to happen before re-attaching the creation form
        setTimeout(function(){
            // Tell the directive to detach the creation form (if it exists) so
            // it's position doesn't get messed up when the tasks array is applied
            $scope.$emit('detachCreationForm');

            $scope.tasks.splice(task.order - 1, 0,task);
            $scope.$apply();

            // Tasks are properly reordered. Tell the directive to reattach the creation form       
            $scope.$emit('reattachCreationForm');
        });
    }); 

現時点では問題なく機能していますが、何かが完全に間違っているという感覚を揺るがすことはできません... これにより、何らかの方法でアプリが壊れることはありますか? それは醜いハックと見なされますか?

4

0 に答える 0