AngularJS指令没有在Bootstrap Popover中编译

Question

我是AngularJS的新手，我正在实施电子商务解决方案。

我希望用户能够将鼠标悬停在购物车图标上以查看购物车摘要。

我写了Angular的<cart></cart>指令并将其放在data-content

的Bootstrap popover的data-html=true内

<a href="javascript:" 
   data-toggle="popover" 
   data-trigger="manual" 
   data-placement="bottom" 
   data-html="true" 
   data-content="<cart></cart>">
   Cart
</a>

但该指令无法编译。

许多答案建议使用其他一些库，例如AngularStrap或AngularUI，但我想知道（改善我的信息）为什么会发生这种情况以及如何解决这个问题。

我认为popover会对内容进行延迟加载，因此内容会在AngularJS编译器的阶段之后加载。我认为有一种方法可以告诉AngularJS重新编译这部分代码。这是真的吗？

Answer 1

我认为你需要做的是以下几点：

popOver指令：

myApp.
directive('popOverDirective', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
            var htmlText = '<a href="javascript:" data-toggle="popover" data-    trigger="manual" data-placement="bottom" data-html="true" data-content="'+scope.content+'">Cart</a>';
            $compile(htmlText)(scope);
            element.replaceWith(template);


        }
    }
});

然后在你的html替换：

<a href="javascript:" data-toggle="popover" data-trigger="manual" data-placement="bottom" data-html="true" data-content="<cart></cart>">
    Cart
</a>

使用：

<pop-over-directive></pop-over-directive>

你的指令应该在之前加载 bootstrap popover类，因此也会初始化它的内容，我假设你有关于你的范围的内容。