AngularJS ng-click broken inside a popover

问题:

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().

---

This has been solved & the plunker is now covering other issues ;-).

UPDATE : plunker to the rescue : http://plnkr.co/edit/QH3NQh?p=preview

.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             });         });       } } }]); 

回答1:

See this google group thread, in particular Andy's fiddle. The difficultly seems to be that the popover widget/component creates a new DOM element that is placed outside the scope where the ui-popover directive is.

回答2:

My solution is the same, but for whatever it's worth, this is the code snippet I end up using. Hope this helps!

//Initialize & config popover controls $('[data-toggle="popover"]').popover({ html : true })     .click(function(ev) {      //this is workaround needed in order to make ng-click work inside of popover      $compile($('.popover.in').contents())($scope); }); 

And don't forget to include $compile and $scope as dependency.

回答3:

I had to use $compile(tip.contents())(scope); after the tip has been created (by binding "click"). Check the Plunker for the solution.

回答4:

look at here how you can make you need and much more. i think it's awesome )

this is the part of library Angular-Strap

文章来源: AngularJS ng-click broken inside a popover