Error with ngDialog

Question

Error with ngDialog

3.7k views Asked by Nicolas Charvoz At 17 September 2024 at 05:28

I'm using the ngDialog project in order to display a popup on my website. I downloaded the project zip from github, it comes with examples data, this works , but when I work with external templates and controller it doesn't work .. I already search for solutions on SO but everybody seems to forget to include ngDialog which is not my case (if it is I will be the dumbest person on earth)

Here is my code :

in the index.html :

<html lang="en" ng-app="blackoutApp"> 
... 
<div id="body" ng-view></div>

in the controllers.js file :

var blackoutApp = angular.module('blackoutApp', ['ngRoute', 'ngDialog']);

blackoutApp.config(['$routeProvider', 'ngDialogProvider', function($routeProvider, ngDialogProvider)    {
   $routeProvider.when('/', {
     templateUrl: 'templates/Body.tpl.html',
     controller: 'BodyCtrl'
   });
   ngDialogProvider.setDefaults({
    className: 'ngdialog-theme-default',
    plain: false,
    showClose: true,
    closeByDocument: true,
    closeByEscape: true,
    appendTo: false,
    preCloseCallback: function () {
      console.log('default pre-close callback');
    }
  });
}]);

blackoutApp.controller('OpenCtrl', ['$scope', function ($scope) {
  $scope.name = "Popup";
}]);
blackoutApp.controller('BodyCtrl', ['$scope', function ($scope, $rootScope, ngDialog) {
  $scope.menus = [
      {'link' : '#/', 'name' : 'main'},
    ];
  $scope.videoButtons = [
    {'class' : 'tubular-play', 'name' : 'Play'},
    {'class' : 'tubular-pause', 'name' : 'Pause'},
  ];
  $scope.open = function () {
    ngDialog.open({template: 'templates/Popup.tpl.html', controller: 'OpenCtrl'});
  };
}]);

And the Bdoy.tpl.html :

<div class="container">
    <div class="grid">
        <div class="center" id="coverEvent"></div>
        <div class="center"><a id="mapInfo" class="active" href="#"></a></div>
        <div>
            <a href="" ng-click="open()">Open via service</a>
        </div>
    </div>
</div>

All my scripts are included at the end of my index.html body tag. When i click on my link Open via service I got this error :

TypeError: Cannot read property 'open' of undefined at k.$scope.open (http://nico.local:5757/Blackout/js/controllers.js:36:13) at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:177:68 at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:194:174) at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:68) at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:346) at HTMLAnchorElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:194:226) at HTMLAnchorElement.p.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2:37944) at HTMLAnchorElement.g.handle.h (http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js:2:33888)

Original Q&A

There are 3 answers

Simeon Chaos On 08 June 2015 at 08:29

blackoutApp.controller('BodyCtrl', [
'$scope', '$rootScope', 'ngDialog', function ($scope, $rootScope, ngDialog) { ... } 
]);

Shiriru On 25 January 2016 at 06:57

I am a beginner in Angularjs too so I stepped in the same issue. Anyway, I could work with it by adding this module explicitly to the dependency injection list:

blackoutApp.controller('BodyCtrl', ['$scope', '$rootScope', 'ngDialog', function ($scope, $rootScope, ngDialog) {
    $scope.menus = [
        {'link' : '#/', 'name' : 'main'},
    ];
    $scope.videoButtons = [
        {'class' : 'tubular-play', 'name' : 'Play'},
        {'class' : 'tubular-pause', 'name' : 'Pause'},
    ];
    $scope.open = function () {
        ngDialog.open({template: 'templates/Popup.tpl.html', controller:  'OpenCtrl'});
    };
}]);

**mirleem** · Accepted Answer · 2014-12-14 14:22:37

replace your 'BodyCtrl' by this:

blackoutApp.controller('BodyCtrl', 'ngDialog', ['$scope', function ($scope, $rootScope, ngDialog) {
  $scope.menus = [
      {'link' : '#/', 'name' : 'main'},
    ];
  $scope.videoButtons = [
    {'class' : 'tubular-play', 'name' : 'Play'},
    {'class' : 'tubular-pause', 'name' : 'Pause'},
  ];
  $scope.open = function () {
    ngDialog.open({template: 'templates/Popup.tpl.html', controller: 'OpenCtrl'});
  };
}]);

TechQA.

Error with ngDialog

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ANGULARJS

Related Questions in NG-DIALOG

Popular Questions

Popular Tags

Trending Questions