AngularJS 弹出窗口绑定到控制器变量

Question

我正在尝试创建一个弹出窗口并将内容直接从控制器加载到其中。

我可以使用此 answer 中的指令成功地将 flag 绑定到工具提示中，但弹出窗口一直显示 flag 的初始值，即使我更改 [=12] =]的值与第二个按钮。

The point is that I wish the content of the popover to change dinamically along with the variable in the controller.

How can I make the trick?

指令如下：

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

第二步

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

Answer 1

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

中的元素属性的值

由于您已经在使用 bootstrap popover，请查看 angular-ui bootstrap，他们已经实现了 popover 指令。他们支持使用 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

这里真正的问题是 popover-template 指令使用了一个模板，它的路由作为字符串存储在 $scope 变量中（正如@kpentchev 在另一个答案的评论中所建议的那样）仅适用于 angular-bootstrap version 0.13.0.

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

AngularJS 弹出窗口绑定到控制器变量

AngularJS popover bind to controller variable

twitter-bootstrap

angularjs

angularjs-directive

angularjs-scope

angularjs-controller