CODEWITHSUNDEEP
angularjs
user804401
user804401

Reputation: 1994

Angularjs Directive not loading PopOver content

I am trying to develop a FaceBook like notification (like when friend requests are received there is an icon that glows with number of notifications on the top right corner).

For this i wrote a popover directive.

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

});

The items are populated in the Controller, and there i am using $timeout to fetch new data from database and fill scope.Items

In the UI i have a button which shows number of new notifications and on click of it i want to show a popover with items. The problem is when is click the button i the popover is not loading the new items.

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

Upvotes: 0

Views: 118

Answers (1)

Polmonite
Polmonite

Reputation: 943

Directives have their own scope, so I'm supposing that when you change $scope.items in your controller you're talking about a different scope; I think that what you want is to look directly at the original $scope.items object, so I would add this:

scope : {
    items : '=items'
},

to your directive.

Upvotes: 0

Related Questions