Angular / Bootstrap Modal WONT调用Twice TypeError:v2.deleteModalProject不是函数

时间:2016-08-25 04:09:47

标签: javascript angularjs twitter-bootstrap modal-dialog bootstrap-modal

目标是能够根据用户需要多次调用模态,因为模式允许用户删除内容。在没有页面重新加载的情况下第二次单击时会出现问题。

我使用的是角1.5.6

我已经用Google搜索并用Google搜索了大约两个半小时。

我已经尝试使用jQuery追加一个带有随机id的唯一div而没有运气,请使用此stackoverflow问题中的示例:

Twitter Bootstrap Modal Multiple event firing

这是我的模态HTML;

    <div class='modal fade' id='deleteModalProfile' role='dialog'>
      <div class='modal-dialog'>
          <!-- Modal content-->
          <div class='modal-content'>
            <div class='modal-header'>
              <button type='button' class='close' data-dismiss='modal'>&times;</button>
              <h4 class='modal-title'>{{modal.title}}</h4>
            </div>
            <div class='modal-body'>
              <p>{{modal.body}}.</p>
            </div>
            <div class='modal-footer'>
              <button ng-show='modal.project' class='btn btn-default' ng-click='removeProject()'>Yes</button>
              <button ng-show='modal.goal' class='btn btn-default' ng-click='removeGoal()'>Yes</button>
              <button type='button' class='btn btn-default' data-dismiss='modal'>No</button>
            </div>
          </div>

        </div>
      </div>

这是我不会打电话两次的功能;

     $scope.deleteModalGoal = function(goal, index) {
        $scope.modal = {"goal": true, "project": false, "title": "Delete Goal?",    "body": "Do you want to delete " + goal.task + " in " + goal.title + "?"}
        $scope.deleteModalGoalIndex = index;
        $scope.deleteModalGoal = goal;
        $("#deleteModalProfile").modal("toggle");
     }

这是我的索引html;

     <div ng-include="'views/modal.html'"></div>
     <button type="button" ng-click="deleteModalGoal(goal, $index)" class="btn btn-danger projectTaskDelete"> <i class="fa fa-trash"></i> Task </button>

请帮助,我只是发布了,因为我没有选择。

感谢您的时间, 丹尼尔

1 个答案:

答案 0 :(得分:2)

&#34; TypeError:v2.myFunction不是函数&#34;当函数与变量同名时,在第二次单击时发生。 Angular的$ scope被另一个不是函数的变量覆盖。

我添加了一个&#34; s&#34;我的功能名称,这解决了问题。

$ scope.deleteModalGoal在$ scope.deleteModalGoal函数中分配,因此将$ scope.deleteModalGoal = function()...更改为$ scope.deleteModalGoals = function()...修复此问题。

https://github.com/angular/angular.js/issues/12353

修正:

      $scope.deleteModalGoals = function(goal, index) {
    $scope.modal = {"goal": true, "project": false, "title": "Delete Goal?",    "body": "Do you want to delete " + goal.task + " in " + goal.title + "?"}
    $scope.deleteModalGoalIndex = index;
    $scope.deleteModalGoal = goal;
    $("#deleteModalProfile").modal("toggle");
 }

原件:

      $scope.deleteModalGoal = function(goal, index) {
    $scope.modal = {"goal": true, "project": false, "title": "Delete Goal?",    "body": "Do you want to delete " + goal.task + " in " + goal.title + "?"}
    $scope.deleteModalGoalIndex = index;
    $scope.deleteModalGoal = goal;
    $("#deleteModalProfile").modal("toggle");
 }

希望帮助那里的人!