Question

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

为此，我写了一个popover指令。

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: '@'
    }
};

}）;

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

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

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

Answer 1

指令有其自己的范围，因此我假设当您在控制器中更改$scope.items时，您正在谈论不同的范围;我认为你想要的是直接查看原始的$scope.items对象，所以我想补充一下：

scope : {
    items : '=items'
},

指示你的指示。

Angularjs指令未加载PopOver内容

1 个答案: