0

I have a problem after refactoring code of Test Application backend. Test has questions and answers, each question has multiple answers and only one of them is correct.

After some debugging everything seems to work fine, but all questions and answers managing logic was located in one controller. I moved answers logic to separate nested controller and after that stuck with this problem. Tried different methods but none of them helped.

The goal is to combine Angular UI Tree (Example #4 - Groups & Categories) with Angular UI Bootstrap Modal.

By design adding and editing questions and answers are happening in modal window. The template is located separately so it's not repeated with each question and answer. When provided data is not valid, validation errors are shown, otherwise the success alert is shown and all fields clear and back to default state (all that happens inside the modal window, it's stay opened and can be closed only by hitting "Cancel", X button or keyboard Esc button).

I need to update QuestionsCtrl $scope.questions from modal window (trigger button is located inside template of modal window). After hitting "Add" button $scope.questions will become updated in scope and the ui.tree is also updated in background. The success alert or validation errors doesn't shown, form fields doesn't clear. Repeated clicks is not calling the actual function again (so it runs only once).

Without modal window but with nested controllers adding works fine.

I created plunk and removed all redundant code so focusing on the problem will be easier. I can provide more code if it's needed. For example in the plunk results of console.log shown only once.

gymnast
  • 1
  • 1
  • You're missing the result function for the modal window... – Th0rndike Jul 14 '14 at 10:52
  • I tried, this works, but using the result promise works only when modal was closed or dismissed, the goal is leave modal in opened condition so manager can add a proper of amount questions / answers without reopening modal again. Maybe it's not possible with this component? I also tried Angular Strap but ran to the same problem. – gymnast Jul 14 '14 at 11:16
  • I removed all dependencies on other modules except Angular UI Bootstrap. – gymnast Jul 15 '14 at 03:49

1 Answers1

0

It's not that it's not working. But you're setting data wrong. When you write:

$scope.add = function() {
    console.log('!!!');
    var data = [{"dataType":"question","id":2,"name":"1. Question 1","answers":[{"dataType":"answer","id":7,"name":"1. Answer 1","correct":false},{"dataType":"answer","id":8,"name":"2. Answer 2","correct":false},{"dataType":"answer","id":9,"name":"3. Answer 3","correct":false}]}];;
    $scope.setQuestions(data);
  };

and:

 $scope.setQuestions = function(data) {
    $scope.questions = data;
  };

you're forcing the questions collection to be data instead of adding new items. So it's like initializing the questions array all over again. For this to work you need to use this kind setQuestions function:

$scope.setQuestions = function(data) {
    $scope.questions.push(data);
  };

that way your new question will be added to the already existing ones.

Hope it helps.

Th0rndike
  • 3,406
  • 3
  • 22
  • 42
  • I forgot to mention that with each action ajax request is sended. Response is in json format and it always contains actual list of questions with answers. Maybe it's not the best solution but it ensures that managers are always working with actual data (because multiple managers can edit the same test, or in the si – gymnast Jul 15 '14 at 03:16
  • (because multiple managers can edit the same test at the same time or one person can edit in multiple browsers / browser's tabs). Is it wrong to update the data that way in terms of Angular or specifically that component? If so, what can you advice instead? – gymnast Jul 15 '14 at 03:37
  • I think traversing through whole array, comparing, searching for the changes and deleting / adding new elements to array depending on that is not the best solution. Also we can force modal to close, use result promise and the reopen programmatically again, but it's not user friendly in my opinion. – gymnast Jul 15 '14 at 04:05
  • @gymnast what i meant is that you have a problem in your logic. Did you try the suggested code? if you're eagerly updating all questions every time then the code is fine, it's setting data correctly. You're setting ALL the questions data every time a click is fired on the modal, but you're setting always the same data, that's why it seems that it's not updating. – Th0rndike Jul 15 '14 at 08:04
  • Yes, I tried and it's working. But I want eagerly update all data with every query. The data is actually varies depending on successful adding or other users actions. It's the the same in plunk just only for simplicity. The fact is even you said the data is setting correctly, "!!!" is shown only once which means the function add() runs only once. To be more exact, when the array turns to [] (empty), the problem appears. I tried updating array without hard reset, but that doesn't solve the problem. Once the array become empty after the further clicks on "Add" button nothing happens. – gymnast Jul 15 '14 at 08:20