17

部分的なhtmlファイルをロードし、スコープに対してコンパイルして、Bootstrapポップオーバーコンテンツとして使用するディレクティブを作成しようとしています。

ただし、非常に基本的な手順で立ち往生しているので、ポップオーバースコープに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
            });
        });


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

このグーグルグループスレッド、特にアンディのフィドルを参照してください。ポップオーバーウィジェット/コンポーネントが、ui-popoverディレクティブがあるスコープの外に配置される新しいDOM要素を作成することは難しいようです。

于 2012-08-31T14:45:36.873 に答える
0

$compile(tip.contents())(scope);チップが作成された後（「クリック」をバインドすることによって）使用する必要がありました。解決策についてはプランカーを確認してください。

于 2012-08-31T16:58:39.780 に答える
0

ここで、どのようにあなたがあなたを必要とすることができるか、そしてはるかに多くを見てください。私はそれが素晴らしいと思います）

これはライブラリAngular-Strapの一部です

于 2013-07-26T11:48:50.850 に答える