AngularJS ng-click在弹出框内打破

Question

我正在尝试编写一个指令来加载一个部分html文件,针对一个范围进行编译并将其用作Bootstrap popover内容.

但是我坚持一个非常基本的步骤,在弹出范围内写一个hide()方法,以便我可以轻松地使用它来关闭它ng-click=hide().

---

这已经解决了,而且现在正在报道其他问题;-).

更新:拯救者: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
            });
        });


    }
}
}]);

Answer 1

我的解决方案是一样的,但无论它值多少,这都是我最终使用的代码片段.希望这可以帮助!

//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);
});

并且不要忘记将$ compile和$ scope包含为依赖项.

Answer 2

看看这个谷歌小组的话题,特别是安迪的小提琴.难的似乎是popover小部件/组件创建了一个新的DOM元素,该元素位于ui-popover指令所在的作用域之外.