动态NG单击jQuery中呈现的HTML中使用 [英] dynamic ng-click to be used in jquery rendered html

问题描述

使用一个伟大的jQuery插件来处理日历。一切运作良好。 （白框按钮NG-点击）

Using a great jquery plugin to handle a calender. All works well. (The white box is the button ng-click)

插件收到数据从PHP（laravel）的形式：

The plugin receives data from php(laravel) in the form of:

<script type="text/javascript">var agendaEventData = {'10-17-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytnbwb)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(wtdlklytnbwb)">More detail</button></span>'},],'10-21-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(lcmdglytnbcc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytnbcc)">More detail</button></span>'},],'10-24-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(224686908)">More detail</button></span>'},],'10-28-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(lcmdglytnblc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytnblc)">More detail</button></span>'},],'10-31-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytnbpc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(wtdlklytnbpc)">More detail</button></span>'},],'11-04-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(lcmdglytpbgb)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytpbgb)">More detail</button></span>'},],'11-07-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytpbkb)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(wtdlklytpbkb)">More detail</button></span>'},],'11-11-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(lcmdglytpbpb)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytpbpb)">More detail</button></span>'},],'11-14-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytpbsb)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(wtdlklytpbsb)">More detail</button></span>'},],'11-18-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(lcmdglytpbxb)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytpbxb)">More detail</button></span>'},],'11-21-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytpbcc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(wtdlklytpbcc)">More detail</button></span>'},],'11-22-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(grzrklytpbdc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(mrzrklytpbdc)">More detail</button></span>'},],'11-25-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(lcmdglytpbhc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytpbhc)">More detail</button></span>'},],'11-28-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytpblc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(wtdlklytpblc)">More detail</button></span>'},],'11-29-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(grzrklytpbmc)">More detail</button></span>'},{content : '<span class="fc-event-action"><button ng-click="toggleModal(mrzrklytpbmc)">More detail</button></span>'},],'12-02-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytqbdb)">More detail</button></span>'},],'12-05-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytqbhb)">More detail</button></span>'},],'12-09-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytqbmb)">More detail</button></span>'},],'12-12-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytqbqb)">More detail</button></span>'},],'12-16-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytqbvb)">More detail</button></span>'},],'12-19-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytqbzb)">More detail</button></span>'},],'12-23-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytqbfc)">More detail</button></span>'},],'12-26-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(gjxljlytqbjc)">More detail</button></span>'},],'12-30-2015' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlytqbnc)">More detail</button></span>'},],'01-06-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvcbjb)">More detail</button></span>'},],'01-13-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvcbrb)">More detail</button></span>'},],'01-20-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvcbbc)">More detail</button></span>'},],'01-27-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvcbkc)">More detail</button></span>'},],'02-03-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvdbfb)">More detail</button></span>'},],'02-10-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvdbnb)">More detail</button></span>'},],'02-17-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvdbwb)">More detail</button></span>'},],'02-24-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvdbgc)">More detail</button></span>'},],'03-02-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvfbdb)">More detail</button></span>'},],'03-09-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvfbmb)">More detail</button></span>'},],'03-16-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvfbvb)">More detail</button></span>'},],'03-23-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvfbfc)">More detail</button></span>'},],'03-30-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvfbnc)">More detail</button></span>'},],'04-06-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvgbjb)">More detail</button></span>'},],'04-13-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvgbrb)">More detail</button></span>'},],'04-20-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvgbbc)">More detail</button></span>'},],'04-27-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvgbkc)">More detail</button></span>'},],'05-04-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvhbgb)">More detail</button></span>'},],'05-11-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvhbpb)">More detail</button></span>'},],'05-18-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvhbxb)">More detail</button></span>'},],'05-25-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvhbhc)">More detail</button></span>'},],'06-01-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvjbcb)">More detail</button></span>'},],'06-08-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvjblb)">More detail</button></span>'},],'06-15-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvjbtb)">More detail</button></span>'},],'06-22-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvjbdc)">More detail</button></span>'},],'06-29-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvjbmc)">More detail</button></span>'},],'07-06-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvkbjb)">More detail</button></span>'},],'07-13-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvkbrb)">More detail</button></span>'},],'07-20-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvkbbc)">More detail</button></span>'},],'07-27-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvkbkc)">More detail</button></span>'},],'08-03-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvlbfb)">More detail</button></span>'},],'08-10-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvlbnb)">More detail</button></span>'},],'08-17-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvlbwb)">More detail</button></span>'},],'08-24-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvlbgc)">More detail</button></span>'},],'08-31-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvlbpc)">More detail</button></span>'},],'09-07-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvmbkb)">More detail</button></span>'},],'09-14-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvmbsb)">More detail</button></span>'},],'09-21-2016' : [{content : '<span class="fc-event-action"><button ng-click="toggleModal(dxczhlyvmbcc)">More detail</button></span>'},],};</script>

这将打开一个模式，这与普通的香草工作正常角/ HTML ＆LT;按钮NG点击=toggleModal（'dxczhlyvmbcc'）＆GT;更多详情＆LT; /按钮＆GT; ，但是这里的问题。 NG-点击需要编译工作，所以我知道我需要使用的指令，然而由于我是新来angularjs 后，我的想法可能不正确，是从数据中获取JSON源代码，但我不确定谁给的数据太，跟我的既jQuery和角度都优先竞争相混淆。

Which opens a modal, which works fine with plain vanilla angular/html <button ng-click="toggleModal('dxczhlyvmbcc')">More detail</button> , however here is the problem. ng-click needs to be compiled to work, so i know that i need to use a directive, however as i am new to angularjs, my thinking might not be correct, is to get json from the data source but i am unsure who to give the data too as i am confused with both jquery and angular are competing for priority.

我要寻找从别人，什么是在JavaScript中发生的事情的概况？然后，我可以与编译指令进行NG单击jQuery的日历中使用，如果这是在最好的办法？

I am looking for an overview from someone as to what is happening in the javascript? Then i can proceed with the directive that compiles the ng-click to be used in the jquery calendar if that is the best approach?

请注意我已阅读每一个计算器的文章我能找到关于这个话题。

Note i have read every stackoverflow article i could find on this topic.

推荐答案

请注意，jQuery的应该angularJS之前，以便采取precedence超过jqLit​​e加载：

Note that jQuery should be loaded before angularJS in order to take precedence over jqLite:

真正的jQuery始终以precedence超过jqLit​​e，只要它是
  加载DOMContentLoaded事件被炒了鱿鱼。

Real jQuery always takes precedence over jqLite, provided it was loaded before DOMContentLoaded event fired.

这篇关于动态NG单击jQuery中呈现的HTML中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！