AngularJS: Извлечение данных в директиву с заводской функцией

Question

Здесь я снова прихожу с еще одним вопросом на пути обучения AngularJS.

С помощью этого сообщества я смог достичь более простой версии того, чего хочу достичь. В принципе, добавление данных в заводскую функцию на одном месте и возможность рендеринга в модальном режиме в другом месте приложения. JSFiddle

Однако, хотя я смог заставить его работать с меньшей версией, я не могу заставить его работать над «настоящим» приложением.

Идея приложения очень проста: некоторые администраторы могут создавать ряд форм, которые будут использоваться пользователями приложения, чтобы запрашивать материал через них, заполняя и следуя потоку утверждения.

В приложении есть часть, где форма может быть отредактирована только с пользователями-админами, имеющими доступ, и другой частью приложения, когда обычные пользователи заполняют формы. Существует заводская функция формы, которая содержит и инкапсулирует использование формы модулями и сохраняет временные данные для одной формы (пока я не реализую код для хранения в монго).

Модально хорошо в начале приложения, потому что не работал должным образом, если я поместил его на другие части кода, потому что я также использую вкладки Bootstrap.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <peek-form-directive></peek-form-directive> 

     <render-form></render-form> 
    </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

, как вы можете видеть, у меня есть 2 директивы внутри коробки модальной

<peek-form-directive></peek-form-directive> 
    <render-form></render-form> 

peekFormDirective очень простая директива, которая только пытается получить данные и показать его в браузере

.directive('peekFormDirective', function (FormServ) { 
    return { 
     scope: {}, 
     template: "<pre>{{formData}}</pre>", 
     restrict: 'E', 
     link: function (scope, elem, attrs) { 
      scope.formData = FormServ.currentFormData.getAllItems(); 
     } 
    }; 
}); 

в то время как форма рендеринга очень похожа, но выполняет итерации компонентов и визуализации по одному.

Часть, которую я не могу понять, почему эти директивы работают отлично, если я использую их на странице, где форма может быть отредактирована, а не в модальном. На этой странице редактирования я поместил директивы вне контроллера, как я сделал бы на модальном.

Так, в примере, в этой странице редактирования директива peekFormDirective отображает следующий результат:

[{"order":1,"itemType":"title","data":{"order":0,"itemType":"","data":{},"label":"a"}}] 

, когда я нажимаю на той же странице кнопку, чтобы открыть модальное, результат это всегда пустой массив [].

Factory function code The view where works

Первоначально я жестко, что это может быть проблема с областями, но я не думаю, что это так, потому что я извлечения данных из функции фабрики в любом случае.

Почему я могу использовать директивы, как ожидалось, на странице редактирования, а не на модальном?

Answer 1

Вы проблема заключается в том, что ваши директивы <peek-form-directive> и <render-form> в stdFormCtrl использовании другого Template объекта к одному в вашем модальный и поэтому getAllItems будет возвращать разные массивы.Поэтому в вашем stdFormCtrl:

if (!$scope.template) { 

     var templateList = []; 
     // You were creating a new template here. 
     // Comment this out and you'll see changes reflected in your modal 
     // FormServ.currentFormData = new FormServ.Template(templateList); 
     $scope.template = FormServ.currentFormData; 
    }