javascript - $http.get 在 HoverOver 上填充 PopOver 文本

Question

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

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

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

我最好的猜测是使用 Angular Directive(指令)，将 ID 号作为范围属性，并从指令执行工厂调用。我已经阅读了指令中的 Controller /链接函数，但不确定正确的实现

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

你不需要特殊的指令，因为值绑定(bind)，你可以只改变范围变量，popover 也会改变。所以你只需:

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

在 changeVar 中，您可以随意更改 $scope.var。这是示例 plunk(使用 $timeout 模拟的 $http 调用): http://plnkr.co/edit/gnm1BtnHzNLnvO62Ar2i?p=preview