Question

我正在尝试创建一个popover并直接从控制器加载内容。

我可以使用此answer中的指令成功将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);
   });
  }
}

plunker

来了

第2步

我希望我可以使用该指令将popover的容器设置为<body>，这样我就可以将popover宽度设置为页面的1/3。

Answer 1

关于更新正文值的第一个问题 - 您没有绑定到范围变量，而是在var content = attrs.content;

中读取分配给元素属性的值

由于您已经在使用bootstrap popover，请查看已实现popover指令的angular-ui bootstrap。他们使用popover-template属性支持自定义模板。

Answer 2

问题是popover的最终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);

请参阅此plunker。

Answer 3

这里真正的问题是使用模板的<?php $x = '<p id="ip"></p>'; $y = '2_2_1_3'; echo $x; ?>指令将哪条路由存储为popover-template变量中的字符串（如@kpentchev在其他答案的注释中所建议的那样）可用仅限$scope version 0.13.0。

那个版本还是not available in npm，所以在我使用bower手动更新它后，我能够正确使用我的自定义弹出窗口。

AngularJS popover绑定到控制器变量

3 个答案: