Angular directive controller: Argument is not a function, got undefined

Question

I have created a directive inside my controller, which i want to include another controller to the directive. The error i get back is Error: [ng:areq] Argument 'js/controllers/testview/DocumentController.js' is not a function, got undefined

TestviewController

app.controller('TestviewController', ['$http', '$scope', '$sessionStorage', '$state', '$log', 'Session', 'api', function ($http, $scope, $sessionStorage, $state, $log, Session, api) {
    var module_id = $state.params.id;

    $http.get(api.getUrl('componentsByModule', module_id))
        .success(function (response) {
            $scope.components = response;
        });
}]);

app.directive('viewDoc', function () {
    return {
        templateUrl: "tpl/directives/testview/document.html",
        controller: "js/controllers/testview/DocumentController.js",
        resolve: { components: function() { return $scope.components }}
    };
});

DocumentController

app.controller('DocumentController', ['$http', '$scope', '$sessionStorage', '$state', '$log', 'Session', 'api', 'components', function ($http, $scope, $sessionStorage, $state, $log, Session, api, components) {
    $scope.components = components;
}]);

I'm pretty new with directices, but does anyone have any idea what I'm doing wrong?

In that case controller is not a js file, it's actually controller name in scope of app i.e. controller: "TestviewController" — maurycy
– maurycy, Commented Mar 30, 2015 at 14:43

Muhammad Reda · Accepted Answer · 2015-03-30 14:29:42Z

3

Inside the directive definition object, the controller property expects a string with the function name, or the function itself (not the path to script file).

app.directive('viewDoc', function () {
    return {
        ...
        controller: "DocumentController",

    };
});

answered Mar 30, 2015 at 14:29

Muhammad Reda

27.1k14 gold badges100 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

javinor · Accepted Answer · 2015-03-30 14:30:32Z

1

You want to call the controller by name, not by file name:

controller: "js/controllers/testview/DocumentController.js"

should be

controller: "DocumentController"

answered Mar 30, 2015 at 14:30

javinor

6844 silver badges8 bronze badges

Comments

shershen · Accepted Answer · 2015-03-30 14:32:31Z

1

There is no option to put controller by its URL in the directive definition. However if you define your controller in DOM template you could use controller: 'myController as myCtrl' in directive definition

answered Mar 30, 2015 at 14:32

shershen

10k11 gold badges44 silver badges62 bronze badges

Comments

bahadir · Accepted Answer · 2015-03-30 14:30:34Z

0

are you sure you need a directive controller? i think what you are trying to achieve is link function.

you can use directive link functions like controllers.

.directive('myDialog', function() {
  return {
   restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function (scope, element) {
  scope.name = 'Jeff';
}
  };
});

take a look at angular docs https://docs.angularjs.org/guide/directive

answered Mar 30, 2015 at 14:30

bahadir

7191 gold badge11 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angular directive controller: Argument is not a function, got undefined

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related