Популяризация загрузчика Angularjs UI с трудностями при рендеринге HTML

0

У меня есть директива AngularJS (v1.4.7), которая использует AngularJS-UI (v0.14.3).

Внутри директивы у меня есть popover, который работает, если я использую только uib-tooltip, например:

...
directiveContent += '<span uib-popover="Some normal text">Popover!</span>';
...

Попытка директивы не работает, как только я переключу ее на uib-tooltip-html:

...
directiveContent += '<span uib-popover-html="Some <b>bold</b> text!">Popover!</span>';
...

Возникающая ошибка синтаксического анализа относится к link: часть директивы, в которой я смотрю, изменяется ли содержимое директивы, и затем я повторно компилирую содержимое:

scope.$watch('content', function(value) {
    var span = angular.element(element.find('span')[1]);
    span.html(value);
    $compile(span)(scope);  // <--- SOME ERROR OCCURS HERE
});

Я компилирую, чтобы привязывать элементы к обработчикам событий.

Вот конкретная ошибка $parse:

angular.js:12477 Error: [$parse:syntax] http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%2F&p1=not%20a%20primary…expression&p2=14&p3=Some%20%3Cb%3Ebold%3C%2Fb%3E%20text!&p4=%2Fb%3E%20text!
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:6:416
at Object.s.throwError (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:209:339)
at Object.s.primary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:206:337)
at Object.s.unary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:503)
at Object.s.multiplicative (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:249)
at Object.s.additive (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:76)
at Object.s.relational (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:205:19)
at Object.s.equality (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:204:241)
at Object.s.logicalAND (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:204:94)
at Object.s.logicalOR (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:203:458)
at Object.s.ternary (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:203:253)
at Object.s.assignment (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:203:107) <span popover-append-to-body="true" popover-animation="true" uib-popover-html="Some <b>(anonymous function) @ angular.js:12477(anonymous function) @ angular.js:9246aa @ angular.js:8791K @ angular.js:8289g @ angular.js:7680g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684g @ angular.js:7684(anonymous function) @ angular.js:7555(anonymous function) @ my-directive.js:57n.$digest @ angular.js:15826n.$apply @ angular.js:16097h @ angular.js:10546K @ angular.js:10744e @ angular.js:10695E @ angular.js:10734e @ angular.js:5507(anonymous function) @ angular.js:5784

Как я могу это исправить?

Теги:
angular-ui-bootstrap

2 ответа

2
Лучший ответ

См. Эту проблему в репозитории углового-ui-bootstrap. Рекомендуемый подход при использовании tooltip/popover-html заключается в том, чтобы обернуть содержимое в кавычки:

 '<span uib-popover-html="\'<span>Some <b>bold</b> text!</span>\'">Popover!</span>'
Поделиться
  • 0
    Экранирование, которое я должен сделать для применения CSS-класса, убийственно: <span class=\\\'tooltip-span\\\'>...</span> , и похоже, что popover игнорирует стили, но это мне намного дальше. Большое спасибо!
  • 0
    Вы должны быть в состоянии использовать class = "tooltip-span" и не должны избегать одинарных кавычек.
0

Я использую следующий код для добавления всплывающих подсказок, возможно, он сработает для вас:

<inactive_icon></inactive_icon>    

angular.element("inactive_icon")
       .empty()
       .replaceWith($compile('<i class="fa fa-minus-circle text-danger" tooltip-placement="right" uib-tooltip="File Inactive"></i>')($scope));
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню