Я использую angularjs в моем проекте.Я хочу использовать bootstrap popover, который будет отображаться, когда пользователь нажимает на ссылку.Предполагается, что во всплывающем окне будет отображаться поле ввода, в которое пользователь должен ввести несколько слов.
<span style="font-size:14px; word-wrap: break-word;" ng-bind-html="linkifyWord(message.expert_advice)"> </span>
Теперь функция linkifyWord определена в index.js, которая в основном делает определенные слова в строке в виде link и отправляет обратно строку, содержащую html.
оригинальное предложение: количество инцидентов по типу для lopa
Строка, возвращаемая linkifyWord содержит html ниже
number of <a href='#' data-html='true' data-toggle='popover' rel='popover' title=problems,issues data-content="<p> <input type='text'/> </p> <p> <input type='submit' value='Submit'/> </p>"> incidents </a> by <a href='#' data-html='true' data-toggle='popover' rel='popover' title=categories,nature data-content="<p> <input type='text'/> </p> <p> <input type='submit' value='Submit'/> </p>"> type </a> for lopa
Таким образом, конечный результат должен выглядеть следующим образом:
количество инцидентов от типа для лопа
Как вы можете видеть выше, он делает два слова в виде ссылок.Теперь я не собираюсь делиться точной логикой того, как мне преобразовать обычное предложение в вышеприведенное, так как оно включает вызов некоторых API, получение данных, их обработку и так далее.
Теперь я могу получить вывод выше.Но что должно произойти дальше, когда вы нажмете на ссылку, должна появиться popup, которая содержит input field, где пользователь может ввести какое-то сообщение и нажать submit.Но я не могу получить popup.Я в основном использую bootstrap popup.
У меня есть все импорты, необходимые для использования Bootsrap в моем проекте.Ниже я расскажу об импорте, чтобы вы, ребята, могли проверить
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Интересная часть: когда я пытаюсь запустить его в онлайн-компиляторе, таком как jsfiddle, я получаю ожидаемые всплывающие окна.Вот ссылка ниже
http://jsfiddle.net/retkza54/
Тогда почему это не работает в моей системе?Что я делаю не так?