Winkel-Modal - schließen/verwerfen modal

Ich bin neu zu Eckig und zu versuchen, eine modale. Probleme schließen/schließen des modal - wenn ich auf die Schaltfläche Abbrechen klicken, passiert nichts.
Hier ist der controller-code:

angular.module('navApp')
    //Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
        $scope.title = "Hello, Angm-Generator!";
        $scope.open = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalCtrl'
            });
        };
    }])

    .controller('ModalCtrl', function ($scope, $uibModalInstance) {
        //Added some content to Modal using $scope
        $scope.content = "ModalCtrl, Yeah!"
        //Add cancel button
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    })

und hier ist die Vorlage angesichts der tatsächlichen modal

<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <button type="button" class="close" datadismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Hello from Modal!</h3>
    </div>
    <div class="modal-body">
        Modal Content from: <b>{{ content }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ngclick="cancel()">Cancel</button>
    </div>
</script>

Sogar Klick auf das Kreuz rechts oben von modal nicht in der Nähe der modal. Irgendwelche Ideen? Danke:)

ng-click="$dismiss()" ist alles, was Sie brauchen
das funktioniert nicht, Fehlermeldung sagt .$schließen() ist keine Funktion. Nur Abbrechen ist für mich arbeiten
Sorry, dass es tatsächlich funktioniert::)) Aber Klick auf das Kreuz oben rechts in der Ecke noch nicht das schließen des modalen.
Sie müssten die gleichen ng-click Ausdruck für das Kreuz
ja, nur realisiert dass. Dank

InformationsquelleAutor A Allen | 2016-05-18

  1. 1

    Sollte es nicht ng-click="Abbrechen()" anstelle von ngclick?

    Außerdem glaube ich nicht, der Umfang ist an die controller, die ich noch nicht getestet, aber ich glaube, dass müssen Sie einige weitere Optionen:

    var modalInstance = $uibModal.open({
   templateUrl: 'myModalContent.html',
   controller: 'ModalCtrl',
   controllerAs: '$mCtrl',
   bindToController: true
});

    Und dann aktualisieren Sie einfach Ihre Vorlage:

    ng-click="$mCtrl.cancel()"
    Du hast Recht über die ng-click, aber der controller Deklaration und Verwendung von $scope ist in Ordnung.
    Vielen Dank an alle, ng-klicken Sie macht es Arbeit. Aber das hinzufügen die anderen Optionen scheinen, um es aufhören zu arbeiten. Komisch ist, das modal ist immer noch nicht schließen kann wenn ich auf das Kreuz in der oberen rechten Ecke.

    InformationsquelleAutor johan

  2. 1

    Haben Sie versucht, $uibModalInstance.close()?

    Andere Sache, die Sie tun können, ist 

     $scope.open = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalCtrl'
        });
        modalInstance.result.then(function successCallBack() {
            modalInstance.close()
         }, function errorCallBack() {
            modalInstance.close()
        })
    };`

    InformationsquelleAutor Santosh Kumar

  3. -2

    Wenn Sie möchten, schließen Sie das Modell , klicken Sie auf die cross bar können Sie dann 

    <button type="button" class="close" data-dismiss="modal">&times;</button>

    Wird diese Schaltfläche , und data-dismiss="modal" wird in der Nähe Ihres modal.

    Nein, die original Bootstrap nicht funktioniert. OP verwendet UI Bootstrap, die "re-implementiert alle Bedienelemente in nativer NG". Siehe github.com/angular-ui/bootstrap/issues/941

    InformationsquelleAutor Ganesh Kamble

Schreibe einen Kommentar