Issue when referencing Angular directives

0
votes

im trying to implement the AngularJs directives to my project but i'm getting stuck with this issue. I have the App.js, ControllerA (which includes a directive on it) and ControllerB. Note that both controllers are in diferent folders: FolderA for ControllerA and FolderB for ControllerB

I want to call the directive created in ControllerA inside a html file into the FolderB.

The problem is that when I try to load the app, Angular is complaining about the module injector:

Uncaught Error: [$injector:modulerr] Failed to instantiate module private_home due to:(…)

App.js

'use strict';

angular.module("private_home", ['private.controllers'])

    .config(['$stateProvider', '$translateProvider', '$urlRouterProvider',
             function($stateProvider, $translateProvider, $urlRouterProvider){

        ...
    }]);

ControllerA

'use strict';

angular.module("private.controllers", [])

    .controller('ControllerA' ,['$scope', function($scope){

        $scope.users= [...];

    .directive('ControllerADirective' ,['controllerADirective', function(){

        return{

            restrict : 'E',

            templateUrl : 'find.htm',

            controller : 'ControllerA',

            controllerAs : 'CotrollerADirective',

            bindToController: true
        }
}]);

ControllerB (I know it's not neccessary, but just in case...)

'use strict';

angular.module("private.controllers")

    .controller('ControllerB' ,['$scope', function($scope){

    }]);

And I call the directive in the html with this tag:

< controller-a-directive >< /controller-a-directive >

Thanks in advance!!

2
angularjsangularjs-directive
.directive('ControllerADirective' ,['controllerADirective', function(){: there is nothign to inject in that function, and there is no service named 'controllerADirective', so it should just be .directive('ControllerADirective', function() {. Please, when you ask about an error, post the exact and complete error message. Reading the message allows knowing what the error is. That's why errors have messages. - JB Nizet
make sure the directive name is camelCased in the declaration: .directive('controllerADirective' ... - Artem K.

2 Answers

0
votes

You didn't close your controller declaration. They are both declared on the module itself, and it is in fact the complete opposite way around as you attach a controller to a directive.

Once attached to a module, a controller can be attached to any template or directive and creates a new instance of itself for each one.

A directive can be called from any controller or template once declared on the module, and once again creates a new instance with each declaration.

'use strict';

angular.module("private.controllers", [])

.controller('ControllerA' ,['$scope', function($scope){

    $scope.users= [...];
}])

.directive('ControllerADirective' ,['controllerADirective', function(){

    return{

        restrict : 'E',

        templateUrl : 'find.htm',

        controller : 'ControllerA',

        controllerAs : 'CotrollerADirective',

        bindToController: true
    }
}]);
0
votes

You have an error in the directive definition. The definition should be something like this:

.directive('controllerADirective' , function(){
    return{
        template : 'This is a Directive',
    }
});

Check this working Plunker https://plnkr.co/edit/VmHrDGFZo4brhBi1Ow0w?p=preview