带表格行的引导模式

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-demo，因为我们没有 sermons 的示例并且无法复制 "sermon in sermons | filter:searchText" - 但这并不重要，以上内容也适用于您的项目。

---

一些解释
$(document).ready() 在角度上下文中根本没用。 ready() 在文档加载完成时执行，但此时 angular 刚刚启动并没有完成它的 digest 或渲染业务。因此，如果您依赖 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"] 执行的 - 它适用于注入/添加的标记，因此它也适用于您的角度。

在未来，尽量避免使用 jQuery - 或者至少是 jQuery，因为你现在正在使用它。您有 angular ui bootstrap 和 angular strap（我更喜欢）以 Angular 方式包装引导程序。您可以使用 $timeout 作为现成的替代品，并使用 ng-click 代替附加的 jQuery 事件处理程序。