Возникли проблемы для передачи данных в модальной в AngularJS

Question

Я следующий код

$scope.currentTask = undefined; 
 

 
$scope.openModal = function (task, size, parentSelector) { 
 
     var parentElem = parentSelector ? 
 
         angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 
 
     
 
     var modalInstance = $uibModal.open({ 
 
      animation: true, 
 
      ariaLabelledBy: 'modal-title', 
 
      ariaDescribedBy: 'modal-body', 
 
      templateUrl: 'myModalContent.html', 
 
      controller: 'homeController', 
 
      controllerAs: '$ctrl', 
 
      scope: $scope, 
 
      size: size, 
 
      appendTo: parentElem, 
 
      resolve: { 
 
       items: function() { 
 
        return $scope.items; 
 
       } 
 
      } 
 
     }); 
 

 
     $rootScope.currentModal = modalInstance; 
 

 
     $rootScope.currentModal.result.then(function() { 
 
     }, function() { 
 
      $log.info('Modal dismissed at: ' + new Date()); 
 
     }); 
 
} 
 

 
$scope.setTask = function(task) { 
 
    $scope.currentTask = task; 
 
} 
 

 
$scope.log = function (currentTask) { 
 
    console.log($scope.currentTask); 
 
}

<div class="row" ng-init="processPages()"> 
 
\t <div class="panel panel-default col-xs-3" style="margin: 20px" ng-repeat = "list in pages[currentPage]"> 
 
\t \t <div class="panel panel-default"> 
 
\t \t \t <div class="panel-heading"> 
 
\t \t \t \t <h6 style = "float: right">({{list.tasks.length}})</h6> 
 
\t \t \t \t <div class="panel-title"> 
 
\t \t \t \t \t <h4>{{list.name}}</h4> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="panel-body"> 
 
\t \t \t <table class="table table-striped table-hover" ng-init = "tasks = list.tasks"> 
 
\t \t \t \t <tr ng-repeat="task in tasks"> 
 
\t \t \t \t \t <td ng-click="setTask(task); openModal(task);> \t \t 
 
\t \t \t \t \t \t <h5>{{task.name}}</h5> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t </div> \t 
 
</div> 
 

 
<script type="text/ng-template" id="myModalContent.html"> 
 
\t <div ng-init="editEnabled = false"> 
 
     <div class="modal-header" ng-init = "log(currentTask)"> 
 
      <h3 class="modal-title" id="modal-title" ng-show = "!editEnabled">Not editing</h3> 
 
      <h3 class="modal-title" id="modal-title" ng-show = "editEnabled">Editing</h3> 
 
     </div> 
 
     <div class="modal-body" id="modal-body"> 
 
     \t <div ng-show="!editEnabled"> 
 

 
     \t </div> 
 
     \t <div ng-show="editEnabled"> 
 
\t \t \t \t 
 
     \t </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     \t <button style = "float: left" class="btn btn-primary" type="button" ng-show = "!editEnabled" ng-click="editEnabled = true">Editar</button> 
 
      <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
      <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
\t </div> 
 
</script>

Вот как страница работает:

First we have a list of tasks and if we click on one task...

...we get a model

Мне нужна информация о задаче, которая будет передана модели, но каждый раз, когда я устанавливаю задачу в области $ scope как задачу в списке, даже если это происходит до того, как модель будет открыта, функция журнала печатает текущую. не определено. Я попытался изменить определение currentTask в начале, чтобы быть чем-то конкретным, но тогда происходит то, что функция журнала печатает то, что было определено в начале, а не после внесения изменений.

Answer 1

Из нашего обсуждения в комментариях попробовать что-то подобное для управления вашей uibmodal (см в git repo для изменений, которые я сделал)

... 
$scope.items = ["items1", "items2", "items3"]; 
var modalInstance = $uibModal.open({ 
    animation: true, 
    ariaLabelledBy: 'modal-title', 
    ariaDescribedBy: 'modal-body', 
    templateUrl: 'myModalContent.html', 
    size: size, 
    appendTo: parentElem, 
    resolve: { 
    modalItems: function() { 
     console.log("items to send to modal", $scope.items); 
     return $scope.items; 
    } 
    }, 
    controller: ['$scope', 'modalItems', function($scope, modalItems) { 
    console.log("items sent to modal", modalItems); 
    $scope.modalItems = modalItems; 
    }] 
}); 
... 

HTML:

<script type="text/ng-template" id="myModalContent.html"> 
{{modalItems}} <!-- Should show the array of items --> 
</script> 

Answer 2

Задача быть неопределенными указывает на то, модальное всплывающее окно ($ scope) не знает о таких данных модели. Я предполагаю, что он создает новый объект области видимости, поэтому ваш вызов setTask() не работает, поскольку он работает в старой области. Вы можете попробовать позвонить во время вашего модального кода.

$scope.openModal = function (task, size, parentSelector) { 
     var parentElem = parentSelector ? 
         angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 

     var modalInstance = $uibModal.open({ 
      animation: true, 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      templateUrl: 'myModalContent.html', 
      controller: 'homeController', 
      controllerAs: '$ctrl', 
      scope: $scope, 
      size: size, 
      appendTo: parentElem, 
      resolve: { 
       items: function() { 
        return $scope.items; 
       } 
      } 
     }); 


     $rootScope.currentModal = modalInstance; 

     $rootScope.currentModal.result.then(function() { 
     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     } 

     //Add this code 
     $scope.currentTask = task; 
      //Or Call Set Task Here. 
      setTask(task); 

     ); 
} 

Answer 3

Единственное решение, которое я мог бы найти, что работал создавал другой контроллер для модальных и обмена данными между modalController и HomeController через службу. Он работает нормально, вот услуга:

var app = angular.module('agendaApp'); 

app.service('sharedModalProperties', function() { 
    var task = undefined; 
    var activeModal = undefined; 

    return { 
     setCurrentTask : function (task) { 
      this.task = task; 
     }, 

     getCurrentTask : function() { 
      return this.task; 
     }, 

     setActiveModal : function (modal) { 
      this.modal = modal; 
     }, 

     getActiveModal : function() { 
      return this.modal; 
     } 
    } 
});