AngularJS - Open $mdDialog in controller

Question

I would like to open a modal popup in my application clicking on a button. I tryed many examples, but I don,T manage to make it work.

I got this error, and I don't manage to fix it. Error: [$injector:unpr] Unknown provider: $mdDialogProvider <- $mdDialog <- ApplicationEtatController

Here is my controller :

(function () {
'use strict';

angular
    .module('NomApplication')
    .controller('ApplicationEtatController', ['$scope', '$mdDialog', ApplicationEtatController]);

ApplicationEtatController.$inject = ['$scope', '$mdDialog','Donnees'];

/**
 * Constructeur du contrôleur d'état d'application.
 * @param {array} Donnees Données.
 * @returns {undefined}
 */
function ApplicationEtatController($scope, $mdDialog, Donnees) {
    /* jshint validthis:true */
    var vm = this;
    vm.Donnees = Donnees;
    vm.DonneesTemp = vm.Donnees;
    vm.dynamicImgLocation = "../../Content/Images/favori_on.gif";
    vm.filtreFavoris = "false";
    vm.filterModeles = filterModeles;
    vm.filteredLetters;
    vm.filterByFavoris = filterByFavoris;
    vm.filterBySujet = filterBySujet;

    vm.filtreParSujet = 'false';
    vm.filtreParFavori = 'false';

    vm.gererFavori = gererFavori;

    vm.init = init;

    vm.languesModele = [
        //{ langue: "En anglais et français", CodLang: "FA" },
        { langue: "En français", CodLang: "F" },
        { langue: "En anglais", CodLang: "A" }
    ];
    vm.langueSelect = vm.languesModele[0];

    vm.NbEnr = Donnees.length;
    vm.nomImgFav = "";

    vm.rechercherParTitre = rechercherParTitre;

    vm.openModal = openModal;
    vm.closeModal = closeModal;

    vm.titreRecherche = "";

    vm.tris = [
        { affichage: "Titre", valeur: "TxtTitremdlDoc" },
        { affichage: "Numéro", valeur: "NoRefreMdlDoc" }
    ]

    vm.triSelect = vm.tris[0].valeur;



    init();
    filterModeles();


    function filterModeles() {
        //Filtrer par langue
        var filtered = [];

        vm.DonneesTemp = vm.Donnees;

        if (vm.langueSelect.CodLang == "F") {
            for (var i = 0; i < vm.DonneesTemp.length; i++) {
                var mdlCourant = vm.DonneesTemp[i];
                if (mdlCourant.CodLang.indexOf("F") >= 0) {
                    filtered.push(mdlCourant);
                }
            }
            vm.DonneesTemp = filtered;
        }
        else if (vm.langueSelect.CodLang == "A") {
            for (var i = 0; i < vm.DonneesTemp.length; i++) {
                var mdlCourant = vm.DonneesTemp[i];
                if (mdlCourant.CodLang.indexOf("A") >= 0) {
                    filtered.push(mdlCourant);
                }
            }
            vm.DonneesTemp = filtered;
        }
        else {
            vm.DonneesTemp = vm.Donnees;
        }


        //Filtrer par sujet
        if (vm.filtreParSujet == "true") {
            filtered = [];
            if (vm.filteredLetters != null && vm.filteredLetters != "") {
                for (var i = 0; i < vm.DonneesTemp.length; i++) {
                    var filteredMdl = vm.DonneesTemp[i];
                    for (var j = 0; j < filteredMdl.Sujets.length; j++) {
                        var filteredMdlSuj = filteredMdl.Sujets[j];
                        var nomLower = filteredMdlSuj.nom.toLowerCase();
                        if (nomLower.indexOf(vm.filteredLetters) >= 0) {
                            filtered.push(filteredMdl);
                        }
                    }
                }
                vm.DonneesTemp = filtered;
            }
        }


        //Filtrer par favori
        if (vm.filtreParFavori == "true") {
            filtered = [];
            for (var i = 0; i < vm.DonneesTemp.length; i++) {
                if (vm.DonneesTemp[i].estFavori == 'true') {
                    filtered.push(vm.DonneesTemp[i]);
                }
            }
            vm.DonneesTemp = filtered;
        }
        else {
            //vm.DonneesTemp = vm.Donnees;
            //vm.filterByLangue();
            //vm.filterBySujet();
        }

    }

    function filterByFavoris() {
        var filtered = [];
        if (vm.filtreParFavori == "true") {
            vm.filtreParFavori = "false";
            vm.dynamicImgLocation = "../../Content/Images/favori_off.gif"
        }
        else {
            vm.filtreParFavori = "true";
            vm.dynamicImgLocation = "../../Content/Images/favori_on.gif"
        }

        vm.filterModeles();
    }

    function filterBySujet() {
        if (vm.filteredLetters != null && vm.filteredLetters != "") {
            vm.filtreParSujet = "true";
        }
        else {
            vm.filtreParSujet = "false";
        }

        vm.filterModeles();

    }

    function gererFavori(idModele) {
        for (var i = 0; i < vm.DonneesTemp.length; i++) {
            var mdlCourant = vm.DonneesTemp[i];
            if (mdlCourant.id == idModele) {
                if (mdlCourant.estFavori == 'true') {
                    mdlCourant.estFavori = 'false';
                    mdlCourant.dynamicImgLocation = "../../Content/Images/favori_off.gif"
                }
                else {
                    mdlCourant.estFavori = 'true';
                    mdlCourant.dynamicImgLocation = "../../Content/Images/favori_on.gif"
                }
            }
        }
        //            $scope.$apply();
        $window.location.reload();//$route.reload();
    }

    function init() {
        var filtered = [];
        for (var i = 0; i < vm.DonneesTemp.length; i++) {
            var mdlCourant = vm.DonneesTemp[i];
            if (mdlCourant.estFavori == "true") {
                mdlCourant.dynamicImgLocation = "../../Content/Images/favori_on.gif"
                filtered.push(mdlCourant);
            }
            else {
                mdlCourant.dynamicImgLocation = "../../Content/Images/favori_off.gif"
                filtered.push(mdlCourant);
            }
        }
        vm.DonneesTemp = filtered;
    }

    function rechercherParTitre() {
        var filtered = [];

        filtered = [];
        if (vm.titreRecherche != null && vm.titreRecherche != "") {
            for (var i = 0; i < vm.DonneesTemp.length; i++) {
                var filteredMdl = vm.DonneesTemp[i];

                var nomLower = filteredMdl.TxtTitremdlDoc.toLowerCase();
                if (nomLower.indexOf(vm.titreRecherche) >= 0) {
                    filtered.push(filteredMdl);
                }

            }
            vm.DonneesTemp = filtered;

        }
        else {
            vm.DonneesTemp = Donnees;
            filterModeles();
        }
    }

    function openModal() {


        $mdDialog.show({
            controller: 'ApplicationEtatController',
            templateUrl: 'ModalFiltre.html',
            clickOutsideToClose: false,
            parent: angular.element(document.body),
            targetEvent: event,
            openFrom: { left: 1500 },
            closeTo: { left: 1500 },
            locals: { object: obj }
        });


    }

    function closeModal(id) {
        ModalService.Close(id);
    }

}

}());

And here is my html file :

<div class="panel panel-primary container-fluid">
<div class="row">
    <div class="col-md-8" style="width:700px;padding-top:10px">
        <input type="search" name="txtSearch" value="" ng-model="vm.titreRecherche" class="form-control" width="400" />
        <a href="#" class="search-icon" ng-click="vm.rechercherParTitre()">
            <i class="fa fa-search"></i>
        </a>
    </div>
    <div class="col-md-4">
    </div>
</div>
<div class="row">
    <div class="col-md-12" style="padding-top:10px;width:1200px">
        <select class="form-control" style="width:200px;display:inline-block;margin-right:50px" name="filter" id="filter" ng-model="vm.langueSelect" ng-options="langue.langue for langue in vm.languesModele" ng-change="vm.filterModeles()"></select>
        <div style="width:350px;display:inline-block;">
            <input placeholder="Filter par sujet" class="form-control" style="width:200px;display:inline-block" type="text" name="txtFilterBySujet" value="FA" ng-model="vm.filteredLetters" />
            <input type="button" ng-click="vm.filterBySujet()" id="btnFiltreSUjet" value="Filtrer" style="width:70px;margin-right:50px;display:inline-block" />
        </div>
        <div style="width : 200px;display:inline-block">
            <a href="#" ng-click="vm.filterByFavoris()" ng-model="filtered" class="aFav">
                <img ng-src="../../Content/Images/favori_on.gif" alt="Filter par favoris" />  Favoris
            </a>
        </div>
        <div>
            <input type="button" name="btnModal" value="Modal" ng-click="vm.openModal()" />

        </div>
    </div>
</div>

<div class="row" style="padding-top:0px;margin-bottom:10px">
    <div class="col-md-8" style="padding-bottom:0px;height:35px;padding-top:10px">

        <p style="margin:0;vertical-align:middle">
            {{vm.DonneesTemp.length}} {{vm.DonneesTemp.length ==  1 ? "résultat" : "résultats"}}


        </p>



    </div>
    <div class="col-md-2">
        <select class="form-control" name="sltTri" ng-model="vm.triSelect" style="width:108px">
            <option ng-repeat="tri in vm.tris" value="{{tri.valeur}}">{{tri.affichage}}</option>
        </select>
    </div>
    <div class="col-md-2">
    </div>

</div>

<div ng-init="vm.DonneesTemps" ng-repeat="Donnee in vm.DonneesTemp | orderBy : vm.triSelect " style="border:1px solid black;background-color:#ffffff ;width:500px; float:left; margin:0 0 25px 20px;padding: 0 0 0 15px;height:150px">
    <div style="width:480px;display:inline-block;">
        <div ng-switch="{{Donnee.TxtTitremdlDoc.length > 40}}">
            <div ng-switch-when="true">
                <h1 style="font-size:1.4em;margin:5px 0 0 0;width:430px;display:inline-block; float:left;" title="{{Donnee.TxtTitremdlDoc}}">{{Donnee.TxtTitremdlDoc | limitTo: 40}} ...</h1>
            </div>
            <div ng-switch-when="false">
                <h1 style="font-size:1.4em;margin:5px 0 0 0;width:430px;display:inline-block; float:left;" title="{{Donnee.TxtTitremdlDoc}}">{{Donnee.TxtTitremdlDoc}}</h1>
            </div>
        </div>



        <a href="#" style="width:40px;margin:0px;height:21px" ng-click="vm.gererFavori(Donnee.id)" ng->
            <img ng-src="{{Donnee.dynamicImgLocation}}" alt="Alternate Text" style="vertical-align:top;display:inline-block;float:left" />
        </a>

    </div>

    <h2 style="font-size:1.1em;margin:5px 0 0 0;">{{Donnee.NoRefreMdlDoc}}</h2>

    <div ng-repeat="sujet in Donnee.Sujets" style="text-align: left; margin: 0px; display: inline-block;">
        <span>{{sujet.nom}} {{$last ? '' : ($index==Sujets.length-2) ? ' and ' : ', '}}</span>
    </div>

    <div ng-switch="{{Donnee.DescMdlDoc.length >  50}}">
        <br />
        <div ng-switch-when="true">
            <p>{{Donnee.DescMdlDoc | limitTo: 50}} ...</p>
        </div>
        <div ng-switch-when="false">
            <p>{{Donnee.DescMdlDoc}}</p>
        </div>
    </div>
</div>

I didn't manage to create a plunker project, sorry.

Thx for your help.

Firstly check your injections, there should be 3 of them: .controller('ApplicationEtatController', ['$scope', '$mdDialog', 'Donnees', ApplicationEtatController]); — Aleksey Solovey
– Aleksey Solovey, Commented Feb 8, 2018 at 13:24
I modified as you said, but it doesn't work. I tried to modifiy my main module like this but I've got an error on ngAria... // --- Création du module principal en passant les dépendances (function () { 'use strict'; angular .module('NomApplication', [ 'Common.services', 'ui.router', 'ngAria', 'ngMaterial', 'ngMessages', 'ng-http-circuitbreaker' ]); }()); — Jaymz1982
– Jaymz1982, Commented Feb 8, 2018 at 13:43
Long story short: you need to match your injections. So for ApplicationEtatController( $scope, $mdDialog, Donnees) you need to have ApplicationEtatController.$inject = ['$scope', '$mdDialog', 'Donnees']; in this order, with a 1-to-1 correlation. You have a problem that you inject twice with .controller('ApplicationEtatController', ['$scope', '$mdDialog', ApplicationEtatController]); by using a [...] brackets syntax. You should remove one of the injections. The other one should stay because you have 'use strict' — Aleksey Solovey
– Aleksey Solovey, Commented Feb 8, 2018 at 13:47
Thank you for your answer, but I'm a little bit lost... I updated my first post with my new Controller code. Is it the right way to do it, or am I still bad? And for the MainModule reference with NGMaterial and other, is it helpful in my case? Thank you again. — Jaymz1982
– Jaymz1982, Commented Feb 8, 2018 at 13:54
now you can have .controller('ApplicationEtatController', ApplicationEtatController); and it should match all of the injections — Aleksey Solovey
– Aleksey Solovey, Commented Feb 8, 2018 at 13:58

Bastián Díaz Olave · Accepted Answer · 2018-02-08 14:14:01Z

1

$mdDialog is not a native feature of AngularJS. It's part of the angular-material library, so make sure that you have installed it (the easiest way is using bower or another package manager) and included in your index.html file:

index.html

//css file
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css" />

//js file
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-aria/angular-aria.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-material/angular-material.js"></script>

And also make sure you have added it in your core module:

(function() {
    'use strict';

    angular
        .module('myApp', [  
            'ngMaterial',
            ...
            ...
            ...
            //You other injections
        ]);
})();

answered Feb 8, 2018 at 14:14

Bastián Díaz Olave

525 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaymz1982 Over a year ago

Thank you for your response. As I told to Aleksey, in Visual Studio my project, the masterPage is deployed on a server and our solution inherits of this MasterPage. I tried to create a new MasterPage, but it doesn't work" Have I something special to do to create a new masterPage, other than modify the _ViewStart.cshtml file?

Collectives™ on Stack Overflow

AngularJS - Open $mdDialog in controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related