遇到问题将数据传递到一个模式在AngularJS

问题描述：

$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仍然是未定义。我试图将开始时的currentTask定义更改为具体的东西，但是接下来发生的事情是，日志功能打印在开始时定义的内容，而不是在更改完成后定义的内容。

你的问题是，你的控制器分配给模态。因此，模式有自己的homecontroller的实例由此创建，您尝试并传入的信息被模式自己的东西覆盖。卸下控制器，如果还需要控制器，请为模式明确指定一个控制器。至少我认为这是问题所在。如果情况并非如此，那么在项目中重新创建代码并进行更多测试。让我知道:) – matt

嘿，男人，谢谢你的答案。我尝试删除控制器的控制器声明，但stil没有工作:(然后我试图删除模型内的范围声明，但我不能从我的范围内得到任何东西 –

答

从我们在评论中讨论尝试这样的事情你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>

仍然没有更新：'（欣赏的努力，虽然改为： modalInstance = $ uibModal.open（{ 动画：真实， ariaLabelledBy： '模式标题'， ariaDescribedBy： '模态体'， templateUrl： 'myModalContent.html' ，范围：$范围，大小：大小， appendTo：parentElem，控制器：功能（$范围，任务）{$ = scope.currentTask任务; }，解决方案：{ task：function（）{ return $ scope.currentTask; } } –

我在我的范围内有$ scope.currentTask = {name：“taskIncorrect”}，setTask将它设置为$ scope.currentTask = {name：“taskCorrect”}。但是，当要求做日志（currentTask）时，我仍然得到任务不正确的一个 –

删除$ scope属性。由于您传递了必需的任务信息。 :)再次，它似乎是覆盖。可能是错误的，虽然.. – matt

答

被未定义的任务指示模态弹出的（$范围）不知道任何这样的模型数据。我假定它创建一个新的范围对象，所以您对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); 

     ); 
}

试过，首先，没有工作要么:( –

答

我能找到的唯一的解决方案，工作是创造了通过服务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; 
     } 
    } 
});

遇到问题将数据传递到一个模式在AngularJS

相关推荐