Question

我试图在我的角度应用程序中添加一个模态框，由于一个不明原因，我的控制器是未定义的。我的其他控制器工作正常，所以我不知道我做错了什么。

声明：

    <!doctype html>
<html lang="en" ng-app="edisoncatApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/main.min.css">

  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/animations/animations.js"></script>
  <script src="js/controllers/module-modal.js"></script>
  <script src="js/controllers/module-detail.js"></script>
  <script src="js/controllers/module-list.js"></script>
  <script src="js/directives/directives.js"></script>
  <script src="js/filters/filters.js"></script>
  <script src="js/services/services.js"></script>
</head>

我的HTML：

<div ng-controller="ModuleModalCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>

<modal title="Login form" visible="showModal">
  <form role="form">
    <div class="form-group">
      <label for="email">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" />
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" id="password" placeholder="Password" />
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</modal>

app模块声明：

    var edisoncatApp = angular.module('edisoncatApp', [
  'ngRoute',
  'edisoncatAnimations',
  'edisoncatControllers',
  'edisoncatFilters',
  'edisoncatServices',
  'edisoncatDirectives'
]);

我的控制员：

angular.module('edisoncatControllers', []).controller('ModuleModalCtrl', ['$scope',
function($scope) {
    $scope.showModal = false;
    $scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
    };
}]);

我的指示：

    var edisoncatDirectives = angular.module('edisoncatDirectives', []);

edisoncatDirectives.directive('modal', function () {
    return {
        template: '<div class="modal fade">' +
        '<div class="modal-dialog">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
        '<h4 class="modal-title">{{ title }}</h4>' +
        '</div>' +
        '<div class="modal-body" ng-transclude></div>' +
        '</div>' +
        '</div>' +
        '</div>',
        restrict: 'E',
        transclude: true,
        replace:true,
        scope:true,
        link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;

            scope.$watch(attrs.visible, function(value){
                if(value == true)
                    $(element).modal('show');
                else
                    $(element).modal('hide');
            });

            $(element).on('shown.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = true;
                });
            });

            $(element).on('hidden.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = false;
                });
            });
        }
    };
});

我总是得到：

 Error: [ng:areq] Argument 'ModuleModalCtrl' is not a function, got undefined

我的其他控制器运行良好，所以我不明白。

Answer 1

您基本上将控制器定义为edisoncatControllers app的一部分。将控制器定义更改为：

edisoncatApp.controller('ModuleModalCtrl', ['$scope',
function($scope) {
    $scope.showModal = false;
    $scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
    };
}]);

除此之外，HTML似乎也被打破了。需要关闭div class=container标记。

<div ng-controller="ModuleModalCtrl" class="container">
    <h1>Modal example</h1>
    <button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
</div>

控制器错误：参数不是函数，未定义

1 个答案: