遇到问题将数据传递到一个模式在AngularJS
我有以下代码遇到问题将数据传递到一个模式在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...
我希望将任务信息传递给模型,但每次将$ scope上的任务设置为列表上的任务时,即使它在模型打开之前发生,日志函数仍会打印currentTask仍然是未定义。我试图将开始时的currentTask定义更改为具体的东西,但是接下来发生的事情是,日志功能打印在开始时定义的内容,而不是在更改完成后定义的内容。
从我们在评论中讨论尝试这样的事情你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;
}
}
});
你的问题是,你的控制器分配给模态。因此,模式有自己的homecontroller的实例由此创建,您尝试并传入的信息被模式自己的东西覆盖。卸下控制器,如果还需要控制器,请为模式明确指定一个控制器。至少我认为这是问题所在。如果情况并非如此,那么在项目中重新创建代码并进行更多测试。让我知道:) – matt
嘿,男人,谢谢你的答案。我尝试删除控制器的控制器声明,但stil没有工作:(然后我试图删除模型内的范围声明,但我不能从我的范围内得到任何东西 –