javascript - AngularJS - 在 Controller 中打开 $mdDialog

Question

我想在我的应用程序中单击按钮打开模式弹出窗口。我尝试了很多例子，但我没能成功。

我收到此错误，但无法修复它。错误:[$injector:unpr] 未知提供程序:$mdDialogProvider <- $mdDialog <- ApplicationEtatController

这是我的 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);
    }

}

}());

这是我的 html 文件:

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

抱歉，我没能创建一个 plunker 项目。

感谢您的帮助。

Answer 1

$mdDialog 不是 AngularJS 的原生功能。它是 Angular-Material 库的一部分，因此请确保您已安装它(最简单的方法是使用 Bower 或其他包管理器)并将其包含在您的 Index.html 中文件:

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>

还要确保您已将其添加到核心模块中:

(function() {
    'use strict';

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