Угловой модал не обновляет $ scope в результате

Question

Я пытаюсь реализовать модальное окно в Angular, чтобы запросить пользователя для ввода, я использовал почти тот же код в предыдущем приложении, и он работал, я действительно «т знаю, что здесь происходит ...

Вот контроллер, который открывает модальное (в Coffee Script):

.controller('addStreamModal', [ 
    '$scope', '$modal', '$log', '$http', '$rootScope' 
    ($scope, $modal, $log, $http, $rootScope) -> 
     $scope.open = -> 
      modalInstance = $modal.open(
       templateUrl: "addStream.html" 
       controller: 'addStreamModalInstance' 
       resolve: 
        public_key: -> 
         "placeholder" 
      ) 
      modalInstance.result.then ((result) -> 
       return 
      ), -> 
       $log.info "Modal dismissed at: " + new Date() 
       return 
      return 
     return 
]) 

Теперь модальный контроллер экземпляра:

.controller('addStreamModalInstance', [ 
    '$scope', '$modalInstance', '$http', 'public_key' 
    ($scope, $modalInstance, $http, public_key) -> 
     console.log(public_key) 
     $scope.public_key = public_key 
     $scope.ok = -> 
      console.log($scope.public_key) 
      $modalInstance.close $scope 
      return 
     $scope.cancel = -> 
      $modalInstance.dismiss "cancel" 
      return 
     return 
]) 

И HTML:

<div class="modal-header"> 
    <h4>Please enter the private key for verification {{public_key}}</h4> 
</div> 
<div class="modal-body"> 
    <div class="form-group"> 
     <input type="text" class="form-control" id="exampleInputEmail1" ng-model="public_key"> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

Так я нажимаю кнопку, и модальный открывается «заполнитель» в текстовом поле, я могу также увидеть этот тест, связанный с названием модальной. Когда я заканчиваю текст в поле, заголовок продолжает обновляться, как ожидается из-за привязки, однако, когда я нажимаю ok, кажется, что $ scope.public_key возвращается к «placeholder». Попытка выяснить, почему.

Answer 1

При установке значения в вашем addStreamModalInstance контроллера вы работаете в другой области, чем addStreamModal. Для обновления addStreamModal «s сферы со значением, установленным в addStreamModalInstance вы можете возвратить выбранное значение (вы делаете это, возвращая $ объем) и назначьте его в. then вызове вашего контроллера addStreamModal.

Ваш addStreamModal стал бы что-то вроде (извините, мой CoffeeScript не велик):

.controller('addStreamModal', [ 
    '$scope', '$modal', '$log', '$http', '$rootScope' 
    ($scope, $modal, $log, $http, $rootScope) -> 
     $scope.modalTitle = "placeholder" //defaults this value to placeholder 
     $scope.open = -> 
      modalInstance = $modal.open(
       templateUrl: "addStream.html" 
       controller: 'addStreamModalInstance' 
       resolve: 
        public_key: -> 
         $scope.modalTitle 
      ) 
      modalInstance.result.then ((modalScope) -> 
       $scope.modalTitle = modalScope.public_key //updates the default value with the value from the modal 
       return 
      ), -> 
       $log.info "Modal dismissed at: " + new Date() 
       return 
      return 
     return 
]) 

Answer 2

Ok У меня он работает сейчас, я вернулся к угловому примеру, протестировали его затем медленно адаптировать его к моему потребности, Heres код:

.controller "addStreamModal", ($scope, $modal, $http, $log) -> 
    $scope.public_key = "" 
    $scope.open = -> 
     modalInstance = $modal.open(
      templateUrl: "addStream.html" 
      controller: "addStreamModalInstance" 
      resolve: 
       public_key: -> 
        $scope.public_key 
     ) 
     modalInstance.result.then ((public_key) -> 
      console.log(public_key) 
      return 
     ), -> 
      $log.info "Modal dismissed at: " + new Date() 
      return 
     return 
    return 

И пример:

.controller "addStreamModalInstance", ($scope, $modalInstance, public_key) -> 
    $scope.editable = public_key: public_key 
    $scope.ok = -> 
     $modalInstance.close $scope.editable.public_key 
     return 

    $scope.cancel = -> 
     $modalInstance.dismiss "cancel" 
     return 
    return 

HTML:

<div class="modal-header"> 
    <h3 class="modal-title">I'm a modal!</h3> 
</div> 
<div class="modal-body"> 
    <input type="text" name="input" class="form-control" ng-model="editable.public_key"> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

Так что я думаю, что разница, что я Nest публичный ключ в .editable объекта в контроллере экземпляра. Я не совсем понимаю, почему это работает, но это так, и я рад этому.