0

我正在使用 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 正文标记的末尾。当我点击我的链接时，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)

4

3 回答 3

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'});
    };
}]);
于 2016-01-25T06:57:04.407 回答
0

用这个替换你的'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'});
  };
}]);

于 2014-12-14T14:22:37.950 回答
-1 
blackoutApp.controller('BodyCtrl', [
'$scope', '$rootScope', 'ngDialog', function ($scope, $rootScope, ngDialog) { ... } 
]);
于 2015-06-08T08:29:46.253 回答