[英]How to define a function inside angular ui modal controller
I try to define a function inside angular ui modal controller by default a found the two function $scope.ok and the $scope.cancel and I want to add my function that remove an item form a list of items that a send to that controller This my angular ui modal controller code : 我尝试在默认情况下在angular ui模态控制器中定义一个函数,发现了两个函数$ scope.ok和$ scope.cancel,我想添加我的函数,该函数删除从发送到该控制器的项目列表中的项目这是我的角度ui模态控制器代码:
myapp.controller('ModalInstanceCtrl', function ($scope,$location,$uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
alert("redirection");
$location.path('/questionnaire');
};
$scope.closeListeChoix = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.deleteChoix=function($index)
{
alert("supp")
$scope.items.splice($index, 1);
};
});
and here where I send the liste of items to modal controller 在这里我将项目清单发送给模态控制器
$scope.ListeChoixOneQuestion=[];
$scope.openListeChoix = function ($index) {
$scope.ListeChoixOneQuestion=$scope.questions[$index].choix ;
console.log("*********** choix de la question **********")
for(var i=0;i<$scope.ListeChoixOneQuestion.length;i++){
console.log("choix : "+$scope.ListeChoixOneQuestion[i].designation);
}
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'listeOfChoix.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.ListeChoixOneQuestion;
}
}
});
and this my html code when i call the function deleteChoix in my ng-click nothing happen and the item did not remove from the list of items any solution 当我在ng-click中调用函数deleteChoix时,这是我的html代码,什么也没有发生,并且该项目没有从项目列表中删除任何解决方案
<div class="modal-body">
<div class="row">
<div class="table-responsive">
<table id="Table2" class="table table-bordered table-striped">
<thead>
<tr>
<th>Designation</th>
<th>Image</th>
<th>Aller à la question</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="choix in items track by $index">
<td>{{choix.designation}}</td>
<td>{{choix.imageUrl}}</td>
<td>{{choix.gotoQuestion}}</td>
<td class="text-center" style="width: 50px;">
<span class="btn btn-danger btn-xs fa fa-remove" style="cursor: pointer;" ng-click="deleteChoix($index);"></span>
</td>
<tr>
</tbody>
</table>
</div>
</div>
</div>
As said in comment the short solution is 正如评论中所说,短期解决方案是
$parent.deleteChoix($index);
It is a scope problem du to limit of inheritancy in Javascript. 这是一个限制Java继承的范围问题。
If you don't want to have this problem, always use an inermediary object like : 如果您不想遇到此问题,请始终使用以下中介对象:
$scope.context = {};// NEVER forget to initialize it in your controller or it won't work even if you don't put anything in at the start.
$scope.context.deleteChoix = [...];
So you won't need to wonder if you should use $parent
or even $parent.$parent
. 因此,您无需怀疑应该使用$parent
还是$parent.$parent
。
Check http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/ for more information. 有关更多信息,请访问http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/ 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.