AngularJS ng-click broken inside a popover

[Olivier Louvignes]

I'm trying to write a directive to load a partial html file, compile it against a scope & use it as the Bootstrap popover content.

However I'm stuck at a very basic step, write a hide() method on the popover scope so that I can easily close it using ng-click=hide(). It looks like ng-click is broken with the way i load the content.

.directive('uiPopover', ['$compile', '$http', function($compile, $http) {
return {
    restrict: 'A',
    scope: {
        hide: '&hide' // did not understand what is this
    },
    link: function postLink(scope, element, attr, ctrl) {
        console.warn('postLink', arguments, this);

        // scope is the anchor scope
        scope.name = "Hello"; // Using {{name}} is working
        scope.hide = function() { // Using ng-click="hide()" is not working :(
            console.log('in');
            element.popover('hide');
        }

        $http.get(attr.uiPopover).success(function(data) {
            element.popover({
                content: $compile(data)(scope), // popover content will get a new scope that I need to put hide() on.
                html: true
            });
        });


    }
}
}]);

[Olivier Louvignes]

jsfiddle to the rescue : http://jsfiddle.net/olouvignes/MZF3J/4/

[Olivier Louvignes]

Plunker to the rescue : http://plnkr.co/edit/QH3NQh

On Thursday, August 30, 2012 7:25:03 PM UTC+2, Olivier Louvignes wrote:

[Fen]

I don't know how to solve the problem, but I think you want to look at the way popover work its magic.

It seems that it recreates the DOM node every time it is shown/hidden, so I believe Angular just cannot bind the scope to the actual DOM element (and as far as I understand this what Angular naturally does).

As for "name" value I think Angular is just compiling the html using provided scope, but 99% that two-way binding is not working also.

[Andy Joslin]

Awhile ago I rewrote popover in pure angular because of this problem, at ajoslin.github.com/angular-bootstrap-ui

[Olivier Louvignes]

Yep, that is what happen, any idea on how I could rebind properly the methods (don't care about de 2-way databinding since i'm editing tmp values)?

I have managed to bind click & get the new popover dom instance element.data("popover").$tip, but I don't know what to do from there.

[Andy Joslin]

Try $compile($('.popover').contents())(scope), after the popover is shown.

[Olivier Louvignes]

Thank You !! That made it ;-).

Now i just have to find the best way to keep a clone of my models for editing values (editing content in the popover should not impact the existing list, but going again over this popover, it would be great to keep edited values).

I'm currently trying sth like that :

var userList = [

{_id: 1, firstName: 'Mark', lastName: 'Otto', username: '@mdo'},

{_id: 2, firstName: 'Jacob', lastName: 'Thornton', username: '@fat'},

{_id: 3, firstName: 'Larry', lastName: 'the Bird', username: '@twitter'}

];

_.each(userList, function(v, k) {

v.$edit = _.clone(v);

});

But that's another problem, I might start a new thread.

[Olivier Louvignes]

Found a bug using this, when i get the form in the popover, any ng-modal input will discard the first letter you type. That is pretty bad!

I've updated the plunker if anyone wanna help.

On Friday, August 31, 2012 5:35:01 PM UTC+2, Andy Joslin wrote:

[bhas...@gmail.com]

Thanks, this helped... in combination with inputs from -- http://stackoverflow.com/questions/7703878/how-can-i-hold-twitter-bootstrap-popover-open-until-my-mouse-moves-into-it for auto closing the popover, solved my issue. Added to this, I also had to keep a flag to ensure the server call to fetch JSON is not happening every time.

It seemed a simple thing to get a popover working, but took longer than expected to get it clean, efficient!

-Bhaskara

[Shannon Skinner]

Oh yeah! Big thanks Andy, you saved me pulling out my hair with Angular + Bootstrap popovers!