Problème de modalité d'Angular-ui

Question

J'essaie d'inclure une modale angular-ui dans mon application web mais j'ai du mal à tout mettre en place.

La documentation indique que vous pouvez utiliser $modalInstance pour injecter le contrôleur enfant dans le contrôleur parent mais je ne comprends pas bien comment procéder.

Voici le code actuel (il est directement issu de la démo modale de la documentation) :

angular.module('myApp.controllers', []).
controller('addContent', function ($scope, $http, $modal, $log){

    //modaltest
    $scope.items = ['item1', 'item2', 'item3'];

    $scope.addTerm = function () {  
        var newTerm = $modal.open({
            templateUrl: 'newTermModal.jade',
            controller: newTerms,
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

        newTerm.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

}).
controller("newTerms",function($scope, $modalInstance, items){

    $scope.items = items;
    $scope.selected = {
        item: $scope.items[0]
    };

    $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

});

Lorsque je lance l'application telle qu'elle est actuellement et que je clique sur le bouton pour ouvrir la modale (fonction addTerm), l'application se bloque avec l'erreur "ReferenceError : newTerms is not defined".

Comme je l'ai mentionné ci-dessus, le site angular-ui indique que vous pouvez injecter un contrôleur avec $modalInstance mais je n'ai pas été capable de comprendre comment. a Toute aide serait grandement appréciée !

EDIT

Après avoir ajouté les guillemets au nom du chemin comme suggéré par Chandermani, il semble que la modale se charge dans la page actuelle plutôt que dans le modèle spécifié.

J'ai modifié le chemin d'accès comme suit : templateUrl :

    $scope.addTerm = function () {  
        var newTerm = $modal.open({
            templateUrl: './views/partials/newTermModal.jade',
            controller: 'newTerms',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

Voici une capture d'écran du problème :

Une idée de ce qui pourrait causer cela ?

Answer 1

Eh bien, vous pouvez passer le contrôleur comme une valeur de chaîne. J'ai pris l'exemple de la démo par défaut pour la modale et je l'ai changé pour passer le nom du contrôleur au lieu du contrôleur lui-même.

Voir mon plunker http://plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview

Donc quelque chose comme ça

controller: 'newTerms',

devrait fonctionner.

Answer 2

J'ai le même problème, la modale charge le fichier HTML principal mais pas le modèle.

Ma configuration précédente était :

ouvre des dialogues mais le contenu des dialogues est le HTML principal (comme sur votre photo)

$scope.opts = {
            backdrop: true,
            backdropClick: true,
            dialogFade: false,
            keyboard: true,
            templateUrl : 'app/reports/modalContent.html',
            controller : 'ModalInstanceCtrl',
            resolve: {}
        };

fonctionne comme prévu

$scope.opts = {
            backdrop: true,
            backdropClick: true,
            dialogFade: false,
            keyboard: true,
            templateUrl : '/app/reports/modalContent.html',
            controller : 'ModalInstanceCtrl',
            resolve: {}
        };

On dirait que si tu mets mal templateUrl il utilise par défaut le HTML de la page principale.

Assurez-vous que vous avez le bon chemin pour le templateUrl.

J'espère que cela vous aidera,

Answer 3

Avez-vous essayé de déclarer une dépendance de 'ui.bootstrap' module ? Comme ceci :

angular.module('myApp.controllers', ['ui.bootstrap'])

Answer 4

Ça m'est aussi arrivé aujourd'hui. Le templateUrl du contrôleur doit correspondre à l'id de la modale dans le fichier html.

Answer 5

Vous devez définir le contrôleur newTerms avant votre autre contrôleur. Vous pouvez également modifier le code et créer une fonction dans votre contrôleur principal avec le nom newTerms et supprimer les guillemets pour le nom de votre contrôleur dans votre modale.

$scope.addTerm = function () {  
    var newTerm = $modal.open({
        templateUrl: './views/partials/newTermModal.jade',
        controller: newTerms,
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });

var newTerms = function($scope, $modalInstance, items){
$scope.items = items;
$scope.selected = {
    item: $scope.items[0]
};

$scope.ok = function () {
    $modalInstance.close($scope.selected.item);
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
}