AngularJS纳克单击酥料饼内破 [英] AngularJS ng-click broken inside a popover

问题描述

我试图写一个指令加载部分HTML文件，编译它针对的范围和放大器;用它作为引导酥料饼的内容。

不过，我被困在一个非常基本的一步，写上酥料饼范围的hide（）方法，这样我就可以使用 NG-点击=隐藏（）。

---

这已经解决和放大器;该plunker现已覆盖等问题; - ）

更新：plunker救援： http://plnkr.co/edit/QH3NQh?p=preVIEW

  .directive（'uiPopover'，['$编译，$ HTTP'，函数（$编译，$ HTTP）{
返回{
    限制：'A'，
    范围： {
        隐藏：'和;隐藏//不明白这是什么
    }，
    链接：功能postLink（范围，元素，属性CTRL）{
        console.warn（'postLink'，参数，这一点）;        //范围为锚范围
        scope.name =你好; //使用{{名}}工作
        scope.hide =功能（）{//使用NG点击=隐藏（）不工作:(
            的console.log（'在'）;
            element.popover（隐藏）;
        }        $ http.get（attr.uiPopover）.success（功能（数据）{
            element.popover（{
                内容：$编译（数据）（范围），//酥料饼的内容将得到一个新的范围，我需要把隐藏（）上。
                HTML：真
            }）;
        }）;
    }
}
}]）;
 




解决方案

请参见这个谷歌组线程，尤其是安迪的小提琴。
在困难似乎是，酥料饼构件/组件创建在下方的UI酥料饼的指令是范围之外的一个新的DOM元素。

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


    }
}
}]);

解决方案

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.

这篇关于AngularJS纳克单击酥料饼内破的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！