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

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

javascript angularjs

Javascript 控制器错误：参数不是函数，未定义,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我试图在我的angular应用程序中添加一个模态框，由于一个模糊的原因，我的控制器未定义。我的其他控制器工作正常，所以我不知道我做错了什么声明： <!doctype html> <html lang="en" ng-app="edisoncatApp"> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <link

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

声明：

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

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

我的其他控制器工作正常，所以我不明白。

您基本上将控制器定义为

edisoncatControllers

应用程序的一部分。将控制器定义更改为以下内容：

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>


模态示例
开放模态

您是否将此控制器的文件包含在index.html中？控制器定义开头的这一行应该是原因：angular.module（'edisoncatControllers'，[]）。可能您正在覆盖eDiscoveryController模块。这将获得控制器angular.module（'edisoncatControllers'），另一种方法是创建一个新的控制器。

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

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