未注册具有该名称的控制器-错误：$ controller：ctrlreg

2024-05-22 • 问答

属性绑定| AngularJS

我们试图在 AngularJS 指令中使用属性绑定，但是问题引发了错误，显示为

名称为counterController的控制器未注册。

我们想将variable:firstcount从counterController传递到orderController。 variable:firstcount必须在单击按钮时增加/减少。

有人可以帮助我们解决错误吗？

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);

}());

(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);