jquery - 带表格行的引导模式

Question

我的页面上有一个 HTML 表格，如下所示，其中行由 ng-repeat 填充

<tr ng-repeat="sermon in sermons | filter:searchText">
    <td align="center">{{ sermon.sermondate }}</td>
    <td>
        <b>{{ sermon.sermontitle }}</b>
        <p>{{ sermon.sermonsummary }}</p>
    </td>
    <td align="center">
        <a ng-href="" data-target="#myModal" data-toggle="modal" data-sermontitle="{{ sermon.sermontitle }}" data-sermonlink="{{ sermon. sermonlink }}">
    <i class="fa fa-youtube-play fa-2x"></i>
    </a>
    <td align="center" class="download"><i class="fa fa-download fa-2x"></i></td>

我的jquery代码如下

$(document).ready(function () {
  $('#myModal').on('shown.bs.modal', function (event) { 
        console.log('button clicked.');
        // Button that triggered the modal
        var button = $(event.relatedTarget) 

        // Extract info from data-* attributes
        var sermontitle = button.data('sermontitle') 
        var sermonlink = button.data('sermonlink')

        // Update the modal's content.
        var modal = $(this)
        modal.find('.modal-title').text(sermontitle)
        modal.find('iframe').attr('src',sermonlink);
    });
});

这是我的模式 HTML

    <!-- Modal -->
<div id="myModal" class="modal fade" 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 Header</h4>
            </div>
            <div class="modal-body">
                <p>Youtube video should play here.</p>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/dmBWI5EZyHM" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我想要实现的是，当用户单击表行中的 YouTube 链接时，将显示一个模式，其中包含在数据属性中传递的 YouTube 链接。

在花了一整天的时间研究这个之后，我仍然没有成功。

这是我的讲道 JSON 示例

<小时/>

[ { "id" : "1",
    "sermondate" : "2015-09-27",
    "sermonlength" : "39",
    "sermonlink" : "https://www.youtube.com/watch?v=Za4jjt80kLw",
    "sermonsummary" : "A must watch.",
    "sermontitle" : "Sunday Morning Service Sep 27 2015",
    "sessionid" : "1",
    "viewcount" : "46"
  },
  { "id" : "2",
    "sermondate" : "2015-10-11",
    "sermonlength" : "54",
    "sermonlink" : "https://www.youtube.com/watch?v=PXj8nY0oOF8",
    "sermonsummary" : "This sermon deals with the important issues of Christian walk.",
    "sermontitle" : "Bible Study 11th October",
    "sessionid" : "3",
    "viewcount" : "16"
  },
  { "id" : "4",
    "sermondate" : "2015-10-11",
    "sermonlength" : "41",
    "sermonlink" : "https://www.youtube.com/watch?v=91xBFt3de1s",
    "sermonsummary" : "This sermon was preached by pastor James Sipes in Sunday Morning church service on 11th October 2015.",
    "sermontitle" : "Sunday Morning Service Oct 11 2015",
    "sessionid" : "1",
    "viewcount" : "13"
  },
  { "id" : "5",
    "sermondate" : "2015-10-18",
    "sermonlength" : "17",
    "sermonlink" : "https://www.youtube.com/watch?v=5jnEoBChZ9I",
    "sermonsummary" : "This sermon was preached by Kurt Robertson in Sunday school service on 18th October 2015.",
    "sermontitle" : "Missionary to North Korea - Oct 18 2015",
    "sessionid" : "1",
    "viewcount" : "18"
  },
  { "id" : "6",
    "sermondate" : "2015-10-18",
    "sermonlength" : "46",
    "sermonlink" : "https://www.youtube.com/watch?v=aRf8X7Zgt8c",
    "sermonsummary" : "This sermon was preached by Kurt Robertson in Sunday Mornign church service on 18th October 2015.",
    "sermontitle" : "Sunday Morning Service Oct 18 2015",
    "sessionid" : "1",
    "viewcount" : "6"
  },
  { "id" : "7",
    "sermondate" : "2015-11-01",
    "sermonlength" : "50",
    "sermonlink" : "https://www.youtube.com/watch?v=hnF8EARhTwA",
    "sermonsummary" : "This sermon was preached by Pastor JAmes Sipes in Sunday school service on 1st November 2015.",
    "sermontitle" : "Bible Study Nov 01 2015",
    "sessionid" : "1",
    "viewcount" : "5"
  }
]

Answer 1

反之亦然 - 使用 click在按钮/链接本身上:

$('a[data-toggle="modal"]').on('click', function() {
    $(".modal-title").text($(this).attr('data-sermontitle'));
    $("#player").attr('src', $(this).attr('data-sermonlink')+'?autoplay=1');
}) 

这里设置autoplay同样，唯一的区别是我给出了 <iframe>一个id , player ，但这不是必要的。

演示 -> http://jsfiddle.net/32u97dau/

我没有制作 plnkr/ Angular 演示，因为我们没有 sermons 的示例并且无法复制"sermon in sermons | filter:searchText" - 但这并不重要，上面的内容也适用于您的项目。

<小时/>

一些解释
$(document).ready()在有 Angular 的上下文中根本没用。 ready()当文档加载完成时执行，但此时 Angular 刚刚启动，还没有完成其摘要或渲染业务。因此，如果您依赖于 DOM 中的事物应该“准备就绪”，即表由 ng-repeat 渲染，那么它永远不会起作用。 。一个肮脏的“黑客”是使用 $timeout相反:

$timeout(function() {
  //what you do in $(document).ready()
})

相反$(document).on('click', 'a[data-toggle="modal"]',...有效，因为它是 delegated event handler 。这意味着您将处理程序附加到父级 document但它是针对子选择器 a[data-toggle="modal"] 执行的- 它适用于注入(inject)/添加的标记，因此它也适用于 Angular。

将来，请尽量避免使用 jQuery，或者至少像您现在使用的那样避免使用 jQuery。您有angular ui bootstrap和 angular strap (我更喜欢)以 Angular 方式包装 Bootstrap 。您可以使用 $timeout 作为现成的替代品，并使用 ng-click 而不是附加的 jQuery 事件处理程序。