17

我正在尝试编写一个指令来加载部分 html 文件，针对范围编译它并将其用作 Bootstrap 弹出内容。

但是我被困在一个非常基本的步骤上，在 popover 范围上编写一个 hide() 方法，以便我可以使用ng-click=hide().

这已经解决了，plunker 现在正在解决其他问题 ;-)。

更新：救援人员： 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
            });
        });


    }
}
}]);
4

4 回答 4

14

我的解决方案是一样的，但不管它值多少钱，这是我最终使用的代码片段。希望这可以帮助！

//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 作为依赖项。

于 2014-05-15T16:47:26.933 回答
6

请参阅此 google group thread，尤其是Andy's fiddle。困难似乎是 popover 小部件/组件创建了一个新的 DOM 元素，该元素放置在 ui-popover 指令所在的范围之外。

于 2012-08-31T14:45:36.873 回答
0

我必须$compile(tip.contents())(scope);在创建提示后使用（通过绑定“点击”）。检查 Plunker 的解决方案。

于 2012-08-31T16:58:39.780 回答
0

看看这里你如何能满足你的需要等等。我认为这很棒）

这是库Angular-Strap的一部分

于 2013-07-26T11:48:50.850 回答