Всплывающее окно AngularJS привязывается к переменной контроллера

Я пытаюсь создать всплывающее окно и загрузить в него содержимое непосредственно с контроллера.

Я могу успешно привязать flag к всплывающей подсказке, используя директиву из этого ответа, но всплывающее окно продолжает показывать начальное значение flag, даже если я изменю значение flag второй кнопкой.

Дело в том, что я хочу, чтобы содержимое поповера динамически менялось вместе с переменной в контроллере.

Как я могу сделать трюк?

Вот директива:

var app = angular.module('plunker', []);

app.directive('popover', function($compile, $timeout){
return {
restrict: 'A',
link:function(scope, el, attrs){
  var content = attrs.content;
  var settings = scope.$eval(attrs.popover);
  var elm = angular.element('<div />');
  elm.append(attrs.content);
  $compile(elm)(scope);
  $timeout(function() {
    el.removeAttr('popover').attr('data-content',elm.html());
    el.popover(settings);
   });
  }
}

А вот и плункер

ШАГ 2

Я хотел бы установить контейнер всплывающего окна как <body>, используя эту директиву, чтобы я мог сделать ширину всплывающего окна 1/3 страницы.


angularjs twitter-bootstrap angularjs-directive angularjs-controller angularjs-scope
person Gargaroz    schedule 11.05.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Что касается вашей первой проблемы с обновлением значения тела - вы не привязываетесь к переменной области, а читаете значение, присвоенное атрибуту элемента в var content = attrs.content;

Поскольку вы уже используете всплывающее окно начальной загрузки, взгляните на начальную загрузку angular-ui, которые реализовали всплывающая директива. Они поддерживают пользовательские шаблоны с использованием атрибута popover-template.

person kpentchev    schedule 11.05.2015
comment
Всплывающее окно начальной загрузки angular-ui в порядке, но я все еще не могу успешно передать шаблон; Я поместил шаблон с именем popoverInfo.html в папку представления (я использовал Yeoman для построения веб-приложения, поэтому я ссылаюсь на построенное таким образом дерево каталогов), но он не загружается ни путем передачи popover-template="popoverInfo.html" элементу, ни popover-template="views/popoverInfo.html". Где Я ошибаюсь? - person Gargaroz; 11.05.2015
comment
@Gargaroz, можете ли вы использовать firebug или simiral, чтобы проверить, что запрос XSR, сделанный angular, сделан против URI, на котором размещен ваш шаблон? - person kpentchev; 11.05.2015
comment
Указано, что когда я изменяю popoverInfo.html, веб-приложение перезагружается правильно из-за Grunt, я взглянул на вкладку сети в консоли разработчика Chrome, и popoverInfo.html не извлекается. - person Gargaroz; 11.05.2015
comment
Plunker завершен, шаблон всплывающей подсказки по-прежнему не отображается. - person Gargaroz; 11.05.2015
comment
Можете ли вы хотя бы подсказать, что мне не хватает в сценарии моего плункера? - person Gargaroz; 11.05.2015
comment
@Gargaroz, во-первых, ng-app не определено, а во-вторых, popover-template требует ссылки на переменную области видимости. - person kpentchev; 11.05.2015

arrow_upward
1
arrow_downward

Проблема в том, что окончательный html всплывающего окна — это не тот, который вы скомпилировали, а просто его копия.

Вместо этого вы можете установить параметр content для самого скомпилированного элемента:

    // remove the attribute so the popover will look at the content option value
    el.removeAttr('data-content');
    settings.content = elm;
    el.popover(settings);

См. этот планкер.

person eladcon    schedule 11.05.2015

arrow_upward
0
arrow_downward

Настоящая проблема здесь заключается в том, что директива popover-template, использующая шаблон, маршрут которого хранится в виде строки в переменной $scope (как было предложено @kpentchev в комментариях к другому ответу), доступна только с angular-bootstrap версия 0.13.0.

Эта версия пока недоступна в npm, поэтому после того, как я вручную обновил ее с помощью Bower Я смог правильно использовать свой пользовательский поповер.

person Gargaroz    schedule 12.05.2015