Передать переменную в UI-bootstrap modal без использования $ scope

Question

Поскольку я новичок, использующий AngularJS, подходит для передачи данных между разными контроллерами и (в моем случае) модальный диск меня сходит с ума. По этой причине я googled по сети и нашел интересный blogpost о передаче данных в UI-bootstrap modal без использования $scope.

У меня был более глубокий взгляд на этот блогпост и поставленный plunk, который работает довольно красиво и начал принимать его в соответствии с моими потребностями.

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

Передача данных с основного контроллера в модальный, похоже, работает, поскольку описание продукта по умолчанию отображается в текстовом текстовом вводе по желанию. Однако передача данных с модального на главный контроллер, отображающий данные в index.html, кажется, не работает, поскольку там отображается старое описание после его редактирования в модальном режиме.

Суммируя мои два вопроса:

1. Что я делаю неправильно в Одере, чтобы достичь «двухстороннего-связывающих» от основного контроллера в ввод текста модального и всего обратный пути, так как тот же подход работает в упомянутом blogpost (ну, поскольку подход, показанный в blogpost, работает, должно быть что-то не так с моим кодом, но я не могу найти ошибки)
2. Как я могу реализовать правильную кнопку Accept, чтобы принять изменено описание, только если эта кнопка нажата и отменит любые изменения в любом другом случае (нажатие на кнопку Cancel или закрытие момента dal, щелкнув рядом с ним)?

Answer 1

В вашей основной контроллер, создать два разрешителя функции: getDescription и setDescription.

В вашем модульном контроллере используйте их.

Ваш модальный HTML

<div class="modal-header"> 
    <h3 class="modal-title">Test Text Input in Modal</h3> 
</div> 
<div class="modal-body"> 
    Product description: 
    <input type="text" ng-model="modal.description"> 
</div> 
<div class="modal-footer"> 
    <button ng-click="modal.acceptModal()">Accept</button> 
    <button ng-click="modal.$close()">Cancel</button> 
</div> 

Ваш главный контроллер

function MainCtrl($modal) { 
    var self = this; 
    self.description = "Default product description"; 

    self.DescriptionModal = function() { 
    $modal.open({ 
     templateUrl: 'modal.html', 
     controller: ['$modalInstance', 
        'getDescription', 
        'setDescription', 
        ModalCtrl 
        ], 
     controllerAs: 'modal', 
     resolve: { 
     getDescription: function() { 
      return function() { return self.description; }; 
     }, 
     setDescription: function() { 
      return function(value) { self.description = value; }; 
     } 
     } 
    }); 
    }; 
}; 

Ваш модальный контроллер

function ModalCtrl($modalInstance, getDescription, setDescription) { 
    var self = this; 
    this.description = getDescription(); 

    this.acceptModal = function() { 
    setDescription(self.description); 
    $modalInstance.close(); 
    }; 
}