La portée de la liaison ne fonctionne pas en modal popup angularjs

Je suis en utilisant angulaire pour lier les données à mon INTERFACE qui fonctionne parfaitement bien. Mais quand un modal popup est appelé sur clic du bouton, la liaison dans la lightbox ne fonctionne pas.

<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>

Angulaire:

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


}]);

est la modale d'une directive? si oui, de directives, de leur propre champ d'application
Ce n'est pas une directive.

InformationsquelleAutor codegrid | 2015-03-20

8

Semble que vous êtes de l'ouverture de l'modale à l'aide de la plaine de jQuery approche. Ce n'est pas d'aller travailler dans Angulaire, car ouvert modal n'est pas connecté à l'Angulaire de l'application, de sorte qu'il ne sait pas que l'modal doit être traité, HTML analysée, etc.

Au lieu de cela, vous devez utiliser les directives correctement, ou, dans le cas de la boîte de dialogue modale vous pouvez utiliser simplement inexistants, comme Angulaire de l'INTERFACE, qui apporte prêt Bootstrap directives Angulaire. Dans votre cas, vous avez besoin $modal service.

L'utilisation serait alors très simple:
```
//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
        });
    };

}]);
```
Démo: http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview
- ce fichier js n' ui.bootstrap de référence?
- Vérifier la mise à jour de la réponse, j'ai ajouté de la démonstration de la façon dont vous devez configurer le tout.
- Bonjour @dfsq j'ai oublié d'inclure que j'utilise .net MVC. Comment dois-je appeler une vue partielle en templateUrl?
- Pas .NET expert, ne peut donc pas répondre à cette question. Mais vous devez fournir une URL pour downloadble de ressources. Ce qui signifie que si vous allez dans le navigateur à cette adresse url, il télécharge modèle de fichier HTML.
- Ok. Vous avez vraiment aidé. Merci
InformationsquelleAutor dfsq
2

Vous devez affecter ng-controller dans votre modale de dialogue balise div.
```
<div class="modal-dialog" **ng-controller="myController"**>
.
.
.
.
.
```
Mise à jour

Je pense que vous avez obtenu cette erreur ci-dessous dans votre fenêtre de console

Module myModule " n'est pas disponible! Vous pouvez soit mal orthographié le nom du module ou oublié de le charger. Si l'enregistrement d'un module assurer que vous spécifiez les dépendances comme deuxième argument.

De sorte s'il vous plaît changer nangular.module('myModule') à angular.module('myModule',[])

essayer ce ci-dessous code js à la place de votre code avec mes modifications ci-dessus
```
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();
    };


}]);
```
- Je l'ai déjà fait.
- veuillez voir toute d'erreur de la console est là?
- je pense que vous avez obtenu une erreur de la console, s'il vous plaît vérifier
- J'ai déjà vérifié. Aucun
- hey, s'il vous plaît essayer mon code complet.
InformationsquelleAutor Ramesh Rajendran
0

Il est possible que votre modal (e.g - modal bootstrap ) pourrait être à l'extérieur de la ng-controller directive

InformationsquelleAutor Krishna

Vous devez vous connecter pour publier un commentaire.

Mise à jour