带角度的引导模式的问题答案

【问题标题】：Troubles with bootstrap modal with angular带角度的引导模式的问题
【发布时间】：2013-12-10 09:10:07
【问题描述】：

我的模态窗口有简单的 Angular 控制器

var ModalDialogCtrl = function ($scope) {
    $scope.data;
};

我有来自 d3 的动态生成数据（我不能使用 ng-click 获取此内容）。我在 d3 onclick 中设置了这样的事件：

    .on("click", function(d, i) {
        //get some data           
        angular.element($('#modalDialog')).scope().data = data;
        $('#modalDialog').modal('show');
    })

对话框显示没有任何数据，但是当我关闭它时，数据会出现在其中（关闭动画，模式中的数据！）。我如何在对话框中显示数据时更新它？！

dialog first opening

dialog second opening and first hiding

还有我的对话框代码：

<div class="wrapper">
    <span>
        <span class="modal-table-header"  data-dismiss="modal" ng-click='cancel()'>close</span>
        <a class="close" data-dismiss="modal"  ng-click='cancel()'><span class="icon-remove-circle icon-bold"></span></a>
    </span>
    </br> </br>
    <table style="display: list-item;">
        <thead>
        <tr>
            <th>{{data[0].headerName}}</th>
            <th ng-repeat="subData in data[0].subData">{{subData.category}}</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in data">
            <td>{{item.header}}</td>
            <td ng-repeat="subData in item.subData">{{subData.value}}</td>
        </tr>
        </tbody>
    </table>
</div>

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap d3.js

【解决方案1】：

您需要$apply 让 Angular 知道数据已更改：

    angular.element($('#modalDialog')).scope().data = data;
    angular.element($('#modalDialog')).scope().$apply();
    $('#modalDialog').modal('show');

在设置data 后第一次打开对话框时，没有执行$digest 循环并且angular 不知道scope.data 已更新。在显示模态对话框之前，显式调用 $apply 会让 Angular 知道更改。

但是，在您第二次打开模式之前，我怀疑 $digest 循环已作为某些其他操作的副作用而被执行，因此您会看到数据。

【讨论】：