La portata vincolante di lavoro in popup modale angularjs

Sto usando angolare per associare dati a mia interfaccia utente e funziona alla perfezione. Ma quando un popup modale viene chiamato su clic del pulsante, l’associazione modale, non funziona.

La portata vincolante di lavoro in popup modale angularjs

<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{checkItem}}</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button ng-click="saveClient()" class="btn btn-primary pull-right btn-tabkey"><i class="fa fa-save"></i>Save</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="focusInput=false"><i class="fa fa-ban"></i>Cancel</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

Angolare:

angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) {

    $scope.checkItem = "";

    $scope.loadEditForm = function () {
        $scope.checkItem = "yes";
        $("#modal-form-edit").modal();
    };


}]);
è modale, una direttiva? se è così, direttive ottenere il loro proprio campo di applicazione
Non è una direttiva.

OriginaleL’autore codegrid | 2015-03-20

3 Replies
  1. 8

    Sembra che si sta aprendo modale normale jQuery approccio. Questo non è andare a lavorare in Angolare, perché aperto modale non è collegato ad Angolare applicazione, in modo da non sapere che modale deve essere gestita, HTML analizzato, etc.

    Invece si dovrebbe utilizzare direttive correttamente, o in caso di dialogo modale, si può semplicemente utilizzare quelli esistenti, come Angolare UI progetto, che porta pronto Bootstrap direttive per Angolare. Nel tuo caso hai bisogno di $modale servizio.

    L’utilizzo quindi sarebbe molto semplice:

    //remember to add ui.bootstrap module dependency
    angular.module('myModule', ['ui.bootstrap']); 
    
    angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "$modal", "dataService", function ($rootScope, $scope, $filter, $modal, dataService) {
    
        $scope.checkItem = "";
    
        $scope.loadEditForm = function () {
            $scope.checkItem = "yes";
            $modal.open({
                templateUrl: 'modal.html',
                controller: 'modalController',
                scope: $scope
            });
        };
    
    }]);

    Demo: http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview

    cosa js file non ui.bootstrap di riferimento?
    Controllo aggiornato risposta, ho aggiunto la demo di come si dovrebbe configurare il tutto.
    Ciao @dfsq ho dimenticato di includere sto usando .net MVC. Come faccio a chiamare parziale vista in templateUrl?
    Non .NET esperto, quindi non posso rispondere a questa domanda. Ma è necessario fornire un URL per downloadble risorsa. Nel senso che se vai nel browser questo url scarica modello di file HTML.
    Ok. Mi ha aiutato molto. Grazie

    OriginaleL’autore dfsq

  2. 2

    È necessario assegnare ng-controller nel tuo modale-dialogo tag div.

    <div class="modal-dialog" **ng-controller="myController"**>
    .
    .
    .
    .
    .

    Aggiornamento

    Penso hai presente il seguente errore nella vostra finestra di console

    Modulo ‘miomodulo’ non è disponibile! Sia stato digitato correttamente il nome del modulo o dimenticato di caricarlo. Se la registrazione di un modulo di garantire che si specificare le dipendenze come secondo argomento.

    Quindi, si prega di cambiare nangular.module('myModule') per angular.module('myModule',[])

    provare questo al di sotto di codice js invece il tuo codice con il mio modifiche di cui sopra

    angular.module('myModule',[]).controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) {
    
        $scope.checkItem = "";
    
        $scope.loadEditForm = function () {
            $scope.checkItem = "yes";
            $("#modal-form-edit").modal();
        };
    
    
    }]);
    Ho già fatto.
    si prega di vedere qualsiasi console di errore c’è?
    penso che hai avuto qualsiasi console di errore, si prega di verificare
    Ho già controllato. Nessuno
    ehi, si prega di provare il mio codice.

    OriginaleL’autore Ramesh Rajendran

  3. 0

    È possibile che il tuo modale (e.g – bootstrap modale ) potrebbe essere al di fuori del ng-controller direttiva

    OriginaleL’autore Krishna

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *