为什么angularjs找不到自定义控制器

Question

我在一个单独的文件中创建了一个自定义 angularjs 控制器，调用者也在一个单独的文件中。但是由于某些原因 angularjs 给出了错误 controller is not defined。以下是文件：

test_ctrl.js:

function test_ctrl($scope, $rootScope, apiSrvc, $mdDialog) {

    $scope.hide = function() {$mdDialog.hide();};
    $scope.cancel = function() {$mdDialog.cancel();};

  }

index.html:

<button id="testbutton" ng-click="openModal($event)">open modal</button>

index.js:

// Open the Modal // 
  $scope.openModal = function(ev) { 
    $mdDialog.show({
      controller: test_ctrl,  
      templateUrl: '/views/testview/testmodal.html',
      parent: angular.element($('.some_parent_class')),
      targetEvent: ev,
      clickOutsideToClose:true,
      locals: {},
      onRemoving: function (event, removePromise) {
      }
    });
  };
  //*/ 
});

testmodal.html:

<md-dialog>
    <md-dialog-content>
        testing content
    </md-dialog-content>
    <md-dialog-actions layout="row">
        <md-button ng-click="cancel()">Close</md-button>
    </md-dialog-actions>
</md-dialog>

可以总结一下过程，index.html 中的按钮假设打开一个 angular 模态对话。因此，对于 index.html 中的按钮，我包含 "ng-click="openModal($event)" 以触发 angular 事件以打开 angular 模式。我不知道我在做什么我丢失或做错了，但在控制台中单击按钮时出现“"test_ctrl" 未在 angular 中定义...”错误。我做错了什么？

编辑好的，另一种解决方法是将控制器定义函数包含在与 index.js 相同的文件中，但我真的很想将外部控制器文件的位置包含在 openModal 参数中，就像您可以使用模态模板一样位置（templateUrl：'/views/testview/testmodal。html'）。控制器文件的位置是否有参数？

Answer 1

控制器函数定义需要在index.js加载之前定义，所以在index.html中你需要在index.js之前加载test_ctrl.js。

更简洁的替代方法是在 index.js 中导入控制器函数。

Answer 2

I am putting controller in external file and having the openModal angular method call it. Is there a way to define the location of the controller file in the openModal paramenters?

将控制器定义为模块的一部分：

angular.module("test",[])
.controller("test_ctrl",
  function test_ctrl($scope, $rootScope, apiSrvc, $mdDialog) {
    $scope.hide = function() {$mdDialog.hide();};
    $scope.cancel = function() {$mdDialog.cancel();};
})

在主模块中将其声明为依赖项：

angular.module("app",['test'])

在模式中，使用字符串调用：

  $scope.openModal = function(ev) { 
    $mdDialog.show({
      controller: ̶t̶e̶s̶t̶_̶c̶t̶r̶l̶,̶ "test_ctrl",  
      templateUrl: '/views/testview/testmodal.html',
      parent: angular.element($('.some_parent_class')),
      targetEvent: ev,
      clickOutsideToClose:true,
      locals: {},
      onRemoving: function (event, removePromise) {
      }
    });
  };

有关详细信息，请参阅 AngularJS Developer Guide - Modules

when defining it as part of module, i can put that code in an external file right? without explicitly telling angular where it is or including it in script tag right?

包含模块的文件可以按任何顺序加载（在 angular.js 之后）。当框架找到 ng-app 指令并构建应用程序时，将整理出依赖项。

有关详细信息，请参阅 John Papa AngularJS Style Guide - Modules

为什么angularjs找不到自定义控制器

why can't angular js can't find the custom controller

javascript

twitter-bootstrap

angularjs

angularjs-controller