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

Question

I have a created a custom angularjs controller in a separate file and the caller is also on in a separate file. But for some reason angularjs is giving error controller is not defined. Here are files:

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>

ok to summarize the process, the button in index.html is suppose to open a angular modal dialogue. So for the button in index.html i included "ng-click="openModal($event)" to trigger the angular event to open the angular modal. I don't know what I'm missing or doing wrong, but in console when clicking the button i get " "test_ctrl" is not defined in angular..." error. What am I doing wrong?

EDIT Ok another way to get around it is to include the controller definition function in same file as index.js, but I'd really like to include the location of the external controller file in the openModal parameter like you can with the modal template location(templateUrl: '/views/testview/testmodal.html'). Is there a parameter for the location of the controller file?

Answer 1

The controller function definition needs to be defined before index.js is loaded, so in index.html you need to load test_ctrl.js before index.js .

A cleaner alternative would be to import the controller function in 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?

Define the controller as part of a module:

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

In the main module declare it as a dependency:

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

In the modal, invoke using a string:

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

For more information, see 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?

Files containing modules can be loaded in any order (after angular.js ). The dependencies will be sorted out when the framework finds the ng-app directive and builds the app.

For more information, see John Papa AngularJS Style Guide - Modules