Angular JS 和 Bootstrap Modal 的数据绑定问题答案

【问题标题】：Data binding issue with Angular JS and Bootstrap ModalAngular JS 和 Bootstrap Modal 的数据绑定问题
【发布时间】：2016-06-20 10:16:59
【问题描述】：

在使用引导模式时，我无法使用 Angular js 更改范围值。基本上我正在调用函数来打开我存储在 controller.js 文件中的模态，然后我试图修改范围值并将它们显示在模态对话框中。

我将点击事件添加到我的 js 组件之一。

eventClick: function(event, element) {
    var $scope = angular.element("#eRotaController").scope();
    $scope.OpenModal("addEventModal", false, event);
}

部分html元素（模态对话框）：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">{{misc.modalTitles}}</h4>
</div>

最后是 OpenModal 函数和变量

// Variables
$scope.misc = {
    modalTitle: "",
    showRemoveEvent : false
};

$scope.OpenModal = function (modal, isNew, event)
{
    if (isNew) {
        $scope.misc.modalTitle = "Add new Event";
    }
    else{
        $scope.misc.modalTitle = "Update event for: " + event.title;
        $scope.misc.showRemoveEvent = true;
        console.log($scope);
    }

    $("#" + modal).modal('show');
}

当我在 OpenModal 函数中更新 modalTitle 时，它不会反映打开模式时的任何更改。

我创建了更简单的示例来确定它是否是模态问题，结果不是。

我添加的快速测试：

<button ng-click="OpenModal2()"></button>
{{misc.showRemoveEvent}}


$scope.OpenModal2 = function()
{
    $scope.misc.modalTitle = "Update event for: " + event.title;
    $scope.misc.showRemoveEvent = true;
}

效果很好。

所以当直接从 html 元素调用方法时它可以正常工作，但是当使用对控制器的引用从 js 调用时失败：

 var $scope = angular.element("#eRotaController").scope();

 $scope.OpenModal("addEventModal", false, event);

不起作用

【问题讨论】：

实际上模态引导与它无关。我尝试在 OpenModal 中更改范围值，但仍然无法正常工作。
我强烈建议您使用 ui-bootstrap 而不是常规引导程序，它是以角度实现的引导程序（使用指令等保持您的代码干净）
感谢 Martijn，但经过进一步调查，引导不是这里的问题。基本上我从 js 调用而不是直接从 DOM 调用的函数是更新范围值，但它没有反映 DOM 上的更改。

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

尝试做：

eventClick: function(event, element) {
    var $scope = angular.element("#eRotaController").scope();
    $scope.$apply(function (){
         $scope.OpenModal("addEventModal", false, event);
    })
},

如果 eventClick 是角度上下文之外的函数，那么上面的代码可能会起作用。

【讨论】：

谢谢！先生，您应该获得令人敬畏的勋章。

【解决方案2】：

尝试使用$uibModal - $uibModal documation，它是这样的：

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;
  //open modal
  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

【讨论】：