Angularjs 指令不加载 PopOver 内容答案

【问题标题】：Angularjs Directive not loading PopOver contentAngularjs 指令不加载 PopOver 内容
【发布时间】：2014-04-24 09:21:35
【问题描述】：

我正在尝试开发类似 FaceBook 的通知（例如，当收到好友请求时，右上角会出现一个带有通知数量的图标）。

为此我写了一个弹出指令。

app.directive('popOver', function ($compile) {


var itemsTemplate = "<div ng-repeat='item in items'>{{item}} <br/><hr/></div> ";
var getTemplate = function (contentType) {
    var template = '';
    switch (contentType) {
        case 'items':
            template = itemsTemplate;
            break;
    }
    return template;
}
return {
    restrict: "A",
    transclude: true,
    template: "<span ng-transclude></span>",
    link: function (scope, element, attrs) {
        var popOverContent = "<div></div>";

        if (scope.items) {
            var html = getTemplate("items");
            popOverContent = $compile(html)(scope);
        }

        var options = {
            content: popOverContent,
            placement: "bottom",
            html: true,
            title: scope.title
        };
        $(element).popover(options);


    },
    scope: {
        items: '=',
        title: '@'
    }
};

});

项目填充在控制器中，我使用 $timeout 从数据库中获取新数据并填充 scope.Items

在 UI 中，我有一个按钮，它显示新通知的数量，单击它我想显示一个带有项目的弹出窗口。问题是当点击按钮时弹出框没有加载新项目。

 <button pop-over items="items" class="navbar-btn btn-info round-button" title="Notifications:" > {{newAlertCount}} </button>

【问题讨论】：

标签： angularjs

【解决方案1】：

指令有自己的范围，所以我假设当您在控制器中更改 $scope.items 时，您谈论的是不同的范围；我认为您想要的是直接查看原始$scope.items 对象，所以我会添加这个：

scope : {
    items : '=items'
},

你的指令。

【讨论】：