Внесите данные из модальной формы в родительскую форму в AngularJS?

Question

У меня есть форма с дополнительными полями данных, отображаемых в модальном:

<form class="form-horizontal" name="newForm" ng-controller="FormCtrl" ng-submit="submit()"> 
    <label>Test</label> 
    <div ng-controller="ModalCtrl"> 
    <a class="btn btn-link" ng-click="open()">Open</a> 
    <ng-include src="'partials/modal.html'"></ng-include> 
    </div> 
</form> 

включает в себя:

<div modal="shouldBeOpen" close="close()" options="opts"> 
    <div class="modal-header"> 
     <h4>I'm a modal!</h4> 
    </div> 
    <div class="modal-body"> 
     <ul> 
      <input type="text" tabindex="16" ng-model="someinput" name="someinput" size="32" class="validate[someinput]" /> 
     </ul> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-warning cancel" ng-click="close()">Cancel</button> 
    </div> 
</div> 

JS:

var ModalCtrl = function ($scope) { 

    $scope.open = function() { 
    $scope.shouldBeOpen = true; 
    }; 

    $scope.close = function() { 
    $scope.shouldBeOpen = false; 
    }; 

    $scope.opts = { 
    backdropFade: true, 
    dialogFade:true 
    }; 

}; 

Как я могу прочитать/инъекционные/передачи пользователю ввод из модальной формы в основную форму?

Answer 1

Я нашел comment to an issue on GitHub с плункером, объясняющим проблему и решение с угловым ui, без общей службы. Работает как шарм.

http://plnkr.co/edit/ktfq0Y?p=preview

Answer 2

Вам необходимо установить связь между двумя контроллерами, и это может быть достигнуто путем создания службы.

Использование this в качестве справки.

Вы можете создать службу следующим образом:

angular.module('myApp', []) 
    .service('sharedInput', function() { 
     var modalInput = ""; 

     return { 
      getModalInput:function() { 
       return modalInput; 
      }, 
      setModalInput:function (value) { 
       modalInput = value; 
      } 
     }; 
    }); 

Далее в вашей ModalCtrl() функции, я предполагаю, что вы будете иметь кнопку, чтобы подать на вход. Скажем, нажатие этой кнопки вызывает функцию «submitInput» в области ModalCtrl. Вы напишете эту функцию:

$scope.submitInput = function() { 
    sharedInput.setMOdalInput($scope.someinput); 
} 

... и в вашем FormCtrl() вы будете писать следующий код для чтения модального ввода:

var input = sharedInput.getModalInput() 

Вы также должны передать параметр «sharedInput» в ModalCtrl и FormCtrl так же, как вы передали $ scope. И теперь у вас есть два контроллера, которые общаются.