Question

我想首先说javascript对我来说是新的，我想我需要一位如何完成这项任务的专家。我有一个模式屏幕，单击一个按钮时创建。我需要做的是每次单击此按钮时创建一个新模态，并在每次关闭它时将其销毁。我这样做有一些帮助，但是我遇到了问题。我正在使用的代码和我遇到的问题解释如下：

变量我将HTML元素存储在：

var modalString = `<div class="modal" style="position: absolute; left: 0px; top:0px; width: 100%; height: 100%;">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close" ng-click="closeModal()">&times;</span>
            <h2>
                History
                <button type="button" ng-click="showAllComments()" class="modal-header-button"> Expand all comments </button>
                <button type="button" ng-click="hideAllComments()" class="modal-header-button"> Collapse all comments </button>
            </h2>
        </div>
        <div id="modalBody" class="modal-body">
            <table id="modalTable" style="table-layout: fixed; width: 100%" class="tableLayout">
                <thead>
                    <tr>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat-start="value in symbolModel.Events" class="event">
                        <td>{{ value.startTime | date:'MM-dd-yyyy HH:mm:ss'}}</td>
                        <td>{{ value.endTime | date:'MM-dd-yyyy HH:mm:ss'}}</td>
                        <td><button type="button" ng-click="toggleComments()">{{ value.Comments.length > 0 ? 'View Comments' : 'No Comments' }}</button></td>
                    </tr>
                    <tr ng-repeat="comments in value.Comments" ng-repeat-end class="comment">
                        <td>{{ comments.enteredTime | date:'MM-dd-yyyy HH:mm:ss'}}</td>
                        <td colspan="2" class="tdWrap">{{ comments.comment }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>`;

在创建模态屏幕时执行的Javascript代码：

var modal = $(modalString);
modal.attr('id', name + 'FilterModal');
$('body').append(scope.symbolModel.compile(modal)(scope));
modal.show();

此代码创建模态屏幕，并允许我使用＆＃39; toggleComments＆＃39;创建的按钮。正确调用功能。我遇到的问题是模态标题中的按钮似乎不起作用。＆＃39;展开所有评论＆＃39;，＆＃39;隐藏所有评论＆＃39;和＆＃39;关闭模式＆＃39;单击按钮时，按钮不会触发它们的事件。有原因吗？另外，有没有更好的方法来创建DOM元素？将HTML元素存储在JS代码中的字符串中并在“查看历史记录”中对其进行编译的概念。按钮点击看起来很难看。任何帮助或建议都会有很大帮助。

我也找到了这个链接。这就是我过去常常开始的，但就像我之前所说的那样，并非所有元素都会触发它们的事件。 AngularJS + JQuery : How to get dynamic content working in angularjs

如何在按钮单击时获取angularjs中的动态内容

0 个答案: