Question

我正在使用ngDialog项目，以便在我的网站上显示弹出窗口。我从github下载了项目zip，它附带了示例数据，这有效，但是当我使用外部模板和控制器时它不起作用..我已经在SO上搜索解决方案但是每个人似乎都忘记包含ngDialog这是不是我的情况（如果是我将成为地球上最愚蠢的人）

这是我的代码：

index.html中的

：

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

在controllers.js文件中

：

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'});
  };
}]);

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

我的所有脚本都包含在index.html body标记的末尾。当我点击我的链接Open via service时，我收到了这个错误：

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)

Answer 1

我也是Angularjs的初学者，所以我介入了同样的问题。无论如何，我可以通过将此模块显式添加到依赖注入列表来使用它：

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'});
    };
}]);

Answer 2

用这个替换你的'BodyCtrl'：

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'});
  };
}]);

Answer 3

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

ngDialog出错

3 个答案: