"Erweitern" Angular UI Bootstrap Popover

(Ich bin irgendwie neu auf AngularJS)

Ich möchte erstellen Sie eine Richtlinie, die Trigger eine Bootstrap Popover, wenn der Benutzer klicken Sie auf das element, an dem der Richtlinie gestellt wird. Zu popover wird über eine HTML-Inhalte erzeugt in meinem Richtlinie und Elemente in diesem HTML-haben ng-klicken Sie auf Richtlinien.

Ich "plain jQuery" wäre es einfach

element.popover({
  content: myGeneratedContent
})
.popover('show');

//some code to attach events to the content

Aber ich kann nicht wirklich herausfinden, wie Sie diese erreichen mit Angular UI. Keine Ahnung ?

Dank

--

was ich tun möchte, ist ein Knopf für https://github.com/mistic100/Angular-Smilies die Anzeige aller verfügbaren smileys und, auf klicken Sie auf, fügen Sie die entsprechende Kurzwahlnummer, die gebundenen Modell.

Was haben Sie versucht? Dies klingt nicht allzu schrecklich. angular-ui.github.io/bootstrap hat eine popover-Richtlinie.
Diese Frage würde wahrscheinlich helfen: stackoverflow.com/questions/16722424/...
Scheint, wie ich war nicht klar genug, mein problem war (noch) nicht zum hinzufügen von HTML-im popover bu zu erstellen, das popover aus meiner eigenen Richtlinie (siehe meine Antwort)

InformationsquelleAutor Mistic | 2014-05-01

  1. 7

    Den ui-bootstrap docs sind ziemlich gut. Allerdings, sagte Sie, Sie wollte html in Ihrem popover. Die ui-bootstrap popover nicht unterstützt. Wir haben einige zusätzliche "extra" popover Sachen in einem separaten Modul in unserem Projekt, vielleicht könnten Sie versuchen, etwas wie dieses zu.

    .directive( 'popoverHtmlPopup', [ function() {
    return {
        restrict: 'EA',
        replace: true,
        scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
        templateUrl: 'template/popover/popover-html.html'
    };
}])
.directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
    return $tooltip( 'popoverHtml', 'popover', 'click' );
}])

    Müssen Sie die Vorlage natürlich auch:

    angular.module("template/popover/popover-html.html", []).run(["$templateCache",     function($templateCache) {
    $templateCache.put("template/popover/popover-html.html",
            "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
            "  <div class=\"arrow\"></div>\n" +
            "\n" +
            "  <div class=\"popover-inner\">\n" +
            "      <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
            "      <div class=\"popover-content\" ng-bind-html=\"content\">    </div>\n" +
            "  </div>\n" +
            "</div>\n" +
            "");
}]);

    Und dann verwenden Sie es wie so:

    <i title="View More Info" class="icon-info-sign"
       data-popover-html="varWithHtml"
       data-popover-title="More Info">
</i>

    InformationsquelleAutor aet

  2. 0

    ui-bootstrap popover unterstützt HTML-template enthalten kann ng-click.

    Ersetzen Sie die Standard-Vorlage mit dem Attribut

    popover-template="nameOfYourTemplate.html"
    es ist veröffentlicht in der version 0.13.0

    InformationsquelleAutor Chi Row

  3. 0

    Scheint, ich war nicht klar genug, mein problem war (noch) nicht zum hinzufügen von HTML-im popover bu zu erstellen, das popover aus meiner eigenen Richtlinie.

    Dies ist ein Weg, es zu tun:

    .directive('myDirective', function() {
    return {
        restrict: 'A',
        template: '<span popover="content" popover-title="title"></span>',
        link: function($scope) {
            $scope.content = '.....';
            $scope.title = '.....';
        }
    };
})

    Und über dem HTML-Inhalt, Chi-Reihe, gab eine Lösung, die nicht anwendbar ist, die noch mit der offiziellen version (hart, auf einer Gabel https://github.com/jbruni/bootstrap-bower-jbruni)

    aet-version auch mit der aktuellen version

    Leider bootstrap-bower-jbruni-Lösung funktioniert nicht mit eckigen Versionen >1.3.0 (1.3.0 funktioniert)

    InformationsquelleAutor Mistic

Schreibe einen Kommentar