AngularJS popover 绑定到控制器变量答案

【问题标题】：AngularJS popover bind to controller variableAngularJS popover 绑定到控制器变量
【发布时间】：2015-05-11 10:15:28
【问题描述】：

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

我可以使用来自此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来了

第二步

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

【问题讨论】：

标签： angularjs twitter-bootstrap angularjs-directive angularjs-scope angularjs-controller

【解决方案1】：

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

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

【讨论】：

angular-ui bootstrap popover 没问题，但是还是不能成功传模板；我在视图文件夹中放置了一个名为“popoverInfo.html”的模板（我使用 Yeoman 来搭建 Web 应用程序，所以我引用了一个如此构建的目录树）但它不会通过将 popover-template="popoverInfo.html" 传递给元素来加载也不是popover-template="views/popoverInfo.html"。我哪里错了？
@Gargaroz 您可以使用 firebug 或 simiral 检查 angular 发出的 XSR 请求是否针对托管您的模板的 URI 发出？
指出当我修改 popoverInfo.html 时，由于 Grunt，webapp 重新加载正确，我查看了 Chrome 开发控制台中的网络选项卡，并没有获取 popoverInfo.html。
Plunker 完成，仍然无法显示工具提示模板。
@Gargaroz，一次，没有定义ng-app，其次，popover-template 需要引用范围变量。

【解决方案2】：

问题是弹出框的最终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。

【讨论】：

【解决方案3】：

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

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

【讨论】：