如何在角度 ui 模态控制器中定义函数答案

【问题标题】：How to define a function inside angular ui modal controller如何在角度 ui 模态控制器中定义函数
【发布时间】：2016-08-27 04:58:49
【问题描述】：

我尝试在默认情况下在 angular ui 模态控制器中定义一个函数 a 找到了两个函数 $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);
      };
});

在这里我将项目列表发送到模态控制器

$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;
                }
              }
            });

当我在我的 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>

【问题讨论】：

所以你在模态的范围内定义了一个函数但它不起作用？你可以试试$parent.deleteChoix($index);。这只是一个简单的检查，我会解释它是否有效。
谢谢伙计，它的工作！但我不明白为什么？

标签： javascript angularjs angular-ui

【解决方案1】：

正如评论中所说，简短的解决方案是

$parent.deleteChoix($index);

由于 Javascript 中的继承限制，这是一个范围问题。
如果您不想遇到此问题，请始终使用中间对象，例如：

 $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 = [...];

因此您无需考虑是否应该使用$parent 甚至$parent.$parent。

查看http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/了解更多信息。

【讨论】：