Search code examples
angularjsangular-materialmddialog

$mdDialog pass locals unknown provider


I have seen many questions like mine, but the answers don't seem to solve my problem. The weird thing is that it was working before. Also, when I place a breakpoint in the controller used for the dialog, the variable used to pass the value isn't null. The value is passed correctly but still an unknown provider error

This is the code in my parent controller

 function addFaq(category, ev){

    $mdDialog.show({
        controller: 'newfaqController'
        , templateUrl: './app/components/faq/modals/newFaq.html'
        , parent: angular.element(document.body)
        , targetEvent: ev
        , bindToController: true
        , clickOutsideToClose: true
        , locals: {
            newFaqCategory: category
         }
        , controllerAs: vm
    }).then(function(result){
        if(result){
            vm.allFaqs.push(result);
        }
    });

    $scope.$watch(function () {
        return $mdMedia('xs') || $mdMedia('sm');
    }, function (wantsFullScreen) {
        $scope.customFullscreen = (wantsFullScreen === true);
    });
};

These are the first lines of my dialog controller

 angular.module('MyApp').controller('newfaqController', ['$mdDialog', 'newFaqCategory', 'apiFactory', newfaqController]);
function newfaqController($mdDialog, newFaqCategory, apiFactory) {

Solution

  • Are you referencing the controller that calls $mdDialog as vm as well? I've run into conflicts with this and us dvm (dialog view model) as the controller reference in $mdDialog.

    This is the answer, I could also leave "ControllerAs" away from the options. But still had to change vm to dvm in my modal controller

     function addFaq(category, ev){
    
        $mdDialog.show({
            controller: 'newfaqController'
            , templateUrl: './app/components/faq/modals/newFaq.html'
            , parent: angular.element(document.body)
            , targetEvent: ev
            , bindToController: true
            , clickOutsideToClose: true
            , locals: {
                newFaqCategory: category
             }
        }).then(function(result){
            if(result){
                vm.allFaqs.push(result);
            }
        });
    
        $scope.$watch(function () {
            return $mdMedia('xs') || $mdMedia('sm');
        }, function (wantsFullScreen) {
            $scope.customFullscreen = (wantsFullScreen === true);
        });
    };
    

    And my modal controller

    angular.module('MyApp').controller('newfaqController', ['$mdDialog', 'newFaqCategory', 'apiFactory', newfaqController]);
    

    function newfaqController($mdDialog, newFaqCategory, apiFactory) { var dvm = this;