jquery - How to target a Bootstrap modal using Typeahead JS in an Angular controller -
im using bootstrap, typeahead js , angular. cant target bootstrap modal typeahead template in angular controller. doesnt recognize angular expression in footer has target modal in html. has template doesnt recognize angular expressions.
so, target bs modal footer in template. there proper solution make work?
see code:
<div id="something{{some.id}}" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mysmallmodallabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> header here... </div> <div class="modal-body"> content here... </div> <div class="modal-footer"> footer here... </div> </div> </div> </div> // code in angular controller: events.initialize(); $scope.eventsdataset = { name: 'events', displaykey: 'title', source: events.ttadapter(), templates: { empty: 'this empty', suggestion: handlebars.compile ('<p>{{title}}</p>'), footer: '<p class="footer" data-toggle="modal" data-target= "#something{{some.id}}">you can click here..</p>' } }; $scope.exampleoptions = { highlight: true };`enter code here`
remove
#
inid
attribute modal window div.
as side node, footer give structure below instead of string. more readable , maintainable in opinion.
footer: function() { return $('<p></p>') .addclass('footer') .attr('data-toggle', 'modal') .attr('data-target', '#something1') .html('click me'); }
here demo showing same
hope helps.