AngularJS: wie zu beobachten Registerkarte Auswahl?

Ich bin mit angularjs Registerkarte und Bereich Beispiel Komponenten

angular.module('components', []).
    directive('tabs', function() {
        return {
            restrict: 'E',
            transclude: true,
            scope: {},
            controller: function($scope, $element) {
                var panes = $scope.panes = [];

                $scope.select = function(pane) {
                    angular.forEach(panes, function(pane) {
                        pane.selected = false;
                    });
                    pane.selected = true;
                }

                this.addPane = function(pane) {
                    if (panes.length == 0) $scope.select(pane);
                        panes.push(pane);
                    }
                },
                template:
                    '<div class="tabbable">' +
                        '<ul class="nav nav-tabs">' +
                            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
                                '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
                            '</li>' +
                        '</ul>' +
                        '<div class="tab-content" ng-transclude></div>' +
                    '</div>',
                replace: true
            };
        }).
    directive('pane', function() {
        return {
            require: '^tabs',
            restrict: 'E',
            transclude: true,
            scope: { title: '@' },
            link: function(scope, element, attrs, tabsCtrl) {
                tabsCtrl.addPane(scope);
            },
            template:
                '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
                '</div>',
            replace: true
        };
    })

SomePage.html

<tabs>
    <pane title="Datos Generales">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-data.html'"></div>
    </pane>
    <pane title="Localización">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-location.html'"></div>
    </pane>
    <pane title="Datos Contacto">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-contacts.html'"></div>
    </pane>
    <pane title="Variantes">
        <div ng-include src="'/resources/js/page/running/admin/templates/update-variants.html'"></div>
    </pane>
</tabs>

Im zweiten Bereich gibt es eine GoogleMap. Ich möchte aktualisieren Sie die google-Karte, wenn der zweite Fensterbereich ausgewählt ist.

Ich weiß nicht, wie man ausgewählte Bereich in der Steuerung. Ich habe versucht $scope.panes aber ist undefined

  • Die controller wissen muss? Ein controller, der Sie umgibt, das tabs-element? Ein controller innerhalb des ng-gehören würde update-location.html?
  • Ein controller, der Sie umgibt, das tabs-element
  • Beachten Sie, dass der v 0.5 (und möglicherweise schon früher), werden auf der Registerkarte Richtlinie kann ein "select" - Attribut, das ist ein '&' Attribut bewertet im übergeordneten Bereich, so ist es nicht mehr notwendig, ändern Sie die ui-bootstrap-code.
  • Können Sie bitte schauen Sie in dieses Problem Winkel-Registerkarte Deaktivieren
InformationsquelleAutor qopuir | 2013-02-18
  1. 8

    Hier sind drei Möglichkeiten, wie Sie könnte Ihr problem lösen:

    1. definieren Sie eine Methode auf dem controller, geben Sie diese Methode in ein Attribut auf das Registerkarten-element, benutzen Sie den '&' syntax auf den Registerkarten Richtlinie isolieren scope-definition aktivieren Sie die Richtlinie zu nennen, die angegebene Methode auf, wenn ein Bereich ausgewählt ist.
    2. definieren Sie ein Objekt auf den controller-Bereich mit einem "selectedPane" - Eigenschaft. Verwenden Sie die '=' sytnax auf den Registerkarten Richtlinie isolieren der Festlegung des Geltungsbereichs zu ermöglichen zwei-Wege-Datenbindung. Diese Eigenschaft festlegen, wenn ein Bereich ausgewählt ist.
    3. haben die tabs Richtlinie $emittieren eine Veranstaltung und haben Ihre controller hören es mit $auf.

    Update: @qopuir gebeten, weitere details zu option 1.

    Angenommen, der controller-Methode ist so etwas wie die folgenden:

    $scope.paneChanged = function(pane) {
    $scope.selectedPane = pane
    ...
}

    Auf das tabs-element, wir werden angeben, diese Funktion mit dem Attribut pane-changed:

    <tabs pane-changed="paneChanged(selectedPane)">

    Dann die Reiter Richtlinie können die '&' syntax zum aufrufen dieser Methode:

    .directive('tabs', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: { paneChanged: '&' },
        controller: function($scope, $element) {
            var panes = $scope.panes = [];

            $scope.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
                $scope.paneChanged({selectedPane: pane});
            }
    • Ich habe versucht, die option 3, aber es ist immer noch ein problem. Die Zuhörer aktualisiert sich die Karte, bevor es gerendert wird, so google-Karte ist falsch gedruckt. Wie könnte dies gelöst werden? Ich bin mit AngularUI für Google Maps.
    • Wenn Sie eine Richtlinie über den Umgang mit Ihrem google Karte, fügen Sie ein controller-Richtlinie und haben es $emittieren, die Veranstaltung nach der Karte macht (hoffentlich google maps bietet einen Rückruf oder einen event können Sie bind (), um zu wissen, wenn das Rendern abgeschlossen ist.) In der callback-oder event-handler, sicher sein, rufen Sie $Umfang.anwenden(). Wenn Sie nicht über einen Rückruf oder Ereignis auslösen, dann das beste, was Sie tun kann, ist $timeout irgendwo. Der timeout-handler konnte nur aufgerufen werden, nach x Millisekunden, oder vielleicht ist es könnte prüfen, für etwas in den DOM, anzuzeigen, dass die Karte gerendert wird.
    • Schließlich habe ich verwendet, $timeout, weil der Rückruf nicht gut funktionierte. Aber ich bin nicht davon überzeugt, mit option 3. Ich bevorzuge option 1, aber ich weiß nicht, wie zu konfigurieren-tabs-Richtlinie zu akzeptieren, die ein parameter-Methode. Könnten Sie ausführlich, wie diese Lösung anzuwenden?
    • wenn Sie nie verstecken die Registerkarte Inhalt, Ort und die anderen diejenigen, die aus dem Bildschirm und immer noch sichtbar, kann die Karte bestimmen die Maße der container ( die kann es nicht, wenn Sie versteckt sind) und Sie gewann t müssen die trigger eine Größe auf der Karte. Dies ist seit langem eine empfohlene Vorgehensweise für jQueryUI tabs docs.jquery.com/UI/API/1.8/...
    • siehe meine aktualisierte Antwort ein Beispiel dafür, wie auf option 1 zu implementieren.
    • Vielen Dank mark!! Und auch danke @charlietfl!! Ich habe eine Kombination aus beiden Lösungen. Markieren Sie die Lösung auf der Pfanne, um den marker auf die Registerkarte Auswahl und @charlieftfl Lösung zu vermeiden, Größenänderung google-anzeigen jedes mal, wenn ein tab ausgewählt ist
    • Können Sie bitte schauen Sie in dieses Problem Winkel-Registerkarte deaktivieren

    InformationsquelleAutor Mark Rajcok
Schreibe einen Kommentar