javascriptangularjsangularjs-directiveangularjs-controller

A controller with this name is not registered -- Error: $controller:ctrlreg

Property Binding | AngularJS

We were trying to use property binding in AngularJS Directives,but the problem raised the error stated as

The controller with the name counterController is not registered.

We would like to pass the variable:firstcount from counterController to orderController. The variable:firstcount needs to be increment/decrement on click of a button.

Can someone help us resolve the error?

app.js

(function(){
    'use strict';

    angular
        .module('mainApp', []);

}());

index.html

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="angular.min.js"></script>

</head>
<body>

    <div ng-controller='counterController as counter'>
        <counter count="counter.firstcount"></counter>
    </div>

    <script src="app.js"></script>
    <script src="counterController.js"></script>
    <script src="orderController.js"></script>
    <script src="counter.directive.js"></script>

</body>
</html>

orderController.js

(function () {
    'use strict';
    angular.module('mainApp', [])
        .controller('orderController', orderController);

    orderController.$inject = ['$scope'];
    function orderController($scope) {
        this.count=$scope.count;
        console.log("Inside OrderController");

        this.increment = function () {
            this.count++;
        }

        this.decrement = function () {
            this.count--;
        }

    };

}());

counterController.js

(function () {
    'use strict';
    angular.module('mainApp', [])
        .controller('counterController', counterController);

    counterController.$inject = ['$scope'];
    function counterController($scope) {
        var counter = this;
        counter.firstcount = 10;
        console.log("Inside Counter Controller");

        counter.increment=function(){
            counter.count++;
        }

        counter.decrement=function(){
            counter.count--;
        }
    };

}());

counter.directive.js

(function () {
    'use strict';

    function counter() {
        return {
            restrict: 'E',
            scope: {
                count: '='
            },
            controller: 'orderController as order',
            template: `
                 Counter: <input type="text" ng-model="order.count">
                 <button type="button" ng-click="order.increment()">Increment</button> 
                 <button type="button" ng-click="order.decrement()">Decrement</button>
            `
        };
    }

    angular.module('mainApp')
        .directive('counter', counter);

}());
Solution

  • Delete the dependency argument in the controller definitions:

    (function () {
    'use strict';
    ̶a̶n̶g̶u̶l̶a̶r̶.̶m̶o̶d̶u̶l̶e̶(̶'̶m̶a̶i̶n̶A̶p̶p̶'̶,̶ ̶[̶]̶)̶
    angular.module('mainApp')
        .controller('orderController', orderController);

    Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

    — AngularJS Developer Guide - modules

    For more information, see