Question

我正在尝试使用Angular和Boostrap实现一个功能，其中用户可以在列表中的项目上获取popOver，并让它执行角度工厂$ http.get函数来检索数据并填充弹出文本。

我不确定这是最好的方法，但我有像这样的ng-repeat：

<ul>
    <li ng-repeat="product in products">
        <model-popover ng-attr-id="{{product.Id}}"></model-popover>                            
    </li>
</ul>

我最好的猜测是使用一个角度指令，将id号作为范围属性，并从指令执行工厂调用。我已经阅读了指令中的控制器/链接功能，但不确定正确的实现

app.directive('modelPopover', ['Factory', function (Factory) {
        return {
            restrict: 'E',
            replace: true,
            scope: { id: "=" },
            controller: function($scope){
                var prod = Factory.getProductDetail(id);
            },
            template: '<a popover-placement="bottom" popover="{{prod}}">{{prod}}</a> '
        };
    }]);

我知道该指令不正确，但我希望有足够的信息来帮助我。提前谢谢！

Answer 1

你不需要特殊的指令，因为价值绑定你可以只改变范围变量，弹出也会改变。所以你简单地说：

  <button popover="{{var}}" popover-trigger="mouseenter" class="btn btn-default" ng-mouseover="changeVar()">Mouseenter</button>

在changeVar中，您可以以任何方式更改$ scope.var。这是示例plunk（$ http调用使用$ timeout模拟）： http://plnkr.co/edit/gnm1BtnHzNLnvO62Ar2i?p=preview

Answer 2

这var prod = Factory.getProductDetail(id); 如果您想使用胡须，则必须更改为$scope.prod = Factory.getProductDetail(id)

$ http.get on Hover Over以填充PopOver文本

2 个答案: