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('ponentsByModule', module_id))
        .success(function (response) {
            $scopeponents = response;
        });
}]);

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

DocumentController

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

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

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('ponentsByModule', module_id))
        .success(function (response) {
            $scope.ponents = response;
        });
}]);

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

DocumentController

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

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

• javascript
• angularjs
• angularjs-directive

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

4 Answers 4

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",

    };
});

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

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

should be

controller: "DocumentController"

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

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/guide/directive