javascript - Adding directive makes controller undefined in angular js code - Stack Overflow

admin2025-04-20 0

Here is my angular js app with html code

<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        angular.module("demo", []).controller('DemoController', function ($scope) {
            $scope.user = {
                dateOfBirth: new Date(1970, 0, 1)
            }
        });
    </script>
</head>
<body>
    <div ng-app="demo" ng-controller="DemoController">
        Date Of Birth:
        <my-datepicker type="text" ng-model="user.dateOfBirth" />
        <br />
        Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span>
    </div>
</body>
</html>

It works fine.But the moment i add a directive to it, it shows error

Error: Argument 'DemoController' is not a function, got undefined

Here is the full code with directive

<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        angular.module("demo", []).controller('DemoController', function ($scope) {
            $scope.user = {
                dateOfBirth: new Date(1970, 0, 1)
            }
        });
        angular.module("demo", []).directive('myDatepicker', function ($parse) {
            return {
                restrict: "E",
                replace: true,
                transclude: false,
                pile: function (element, attrs) {
                    var modelAccessor = $parse(attrs.ngModel);

                    var html = "<input type='text' id='" + attrs.id + "' >" +
            "</input>";

                    var newElem = $(html);
                    element.replaceWith(newElem);

                    return function (scope, element, attrs, controller) {

                        var processChange = function () {
                            var date = new Date(element.datepicker("getDate"));

                            scope.$apply(function (scope) {
                                // Change bound variable
                                modelAccessor.assign(scope, date);
                            });
                        };

                        element.datepicker({
                            inline: true,
                            onClose: processChange,
                            onSelect: processChange
                        });

                        scope.$watch(modelAccessor, function (val) {
                            var date = new Date(val);
                            element.datepicker("setDate", date);
                        });

                    };

                }
            };
        });
    </script>
</head>
<body>
    <div ng-app="demo" ng-controller="DemoController">
        Date Of Birth:
        <my-datepicker type="text" ng-model="user.dateOfBirth" />
        <br />
        Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span>
    </div>
</body>
</html>

i'm following the tutorial from this link .html

Here is my angular js app with html code

<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        angular.module("demo", []).controller('DemoController', function ($scope) {
            $scope.user = {
                dateOfBirth: new Date(1970, 0, 1)
            }
        });
    </script>
</head>
<body>
    <div ng-app="demo" ng-controller="DemoController">
        Date Of Birth:
        <my-datepicker type="text" ng-model="user.dateOfBirth" />
        <br />
        Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span>
    </div>
</body>
</html>

It works fine.But the moment i add a directive to it, it shows error

Error: Argument 'DemoController' is not a function, got undefined

Here is the full code with directive

<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        angular.module("demo", []).controller('DemoController', function ($scope) {
            $scope.user = {
                dateOfBirth: new Date(1970, 0, 1)
            }
        });
        angular.module("demo", []).directive('myDatepicker', function ($parse) {
            return {
                restrict: "E",
                replace: true,
                transclude: false,
                pile: function (element, attrs) {
                    var modelAccessor = $parse(attrs.ngModel);

                    var html = "<input type='text' id='" + attrs.id + "' >" +
            "</input>";

                    var newElem = $(html);
                    element.replaceWith(newElem);

                    return function (scope, element, attrs, controller) {

                        var processChange = function () {
                            var date = new Date(element.datepicker("getDate"));

                            scope.$apply(function (scope) {
                                // Change bound variable
                                modelAccessor.assign(scope, date);
                            });
                        };

                        element.datepicker({
                            inline: true,
                            onClose: processChange,
                            onSelect: processChange
                        });

                        scope.$watch(modelAccessor, function (val) {
                            var date = new Date(val);
                            element.datepicker("setDate", date);
                        });

                    };

                }
            };
        });
    </script>
</head>
<body>
    <div ng-app="demo" ng-controller="DemoController">
        Date Of Birth:
        <my-datepicker type="text" ng-model="user.dateOfBirth" />
        <br />
        Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span>
    </div>
</body>
</html>

i'm following the tutorial from this link http://henriquat.re/directives/advanced-directives-bining-angular-with-existing-ponents-and-jquery/angularAndJquery.html

Share Improve this question asked Jun 27, 2013 at 8:23 iJade 23.9k58 gold badges161 silver badges250 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

You are defining the demo module twice. By passing a second argument to the angular.module method, you create a new module. Don't pass the second argument to return a reference to an existing module:

// Create a module
angular.module("demo", []).controller('DemoController', function ($scope) {
    // ...
});
// Get reference to module
angular.module("demo").directive('myDatepicker', function ($parse) {
    //              ^ Only one argument
});

Note that the controller method returns the module to allow chaining, and the module method also obviously returns the module, so you also have two other options:

Chaining:

angular.module("demo", []).controller('DemoController', function ($scope) {
    // ...
}).directive('myDatepicker', function ($parse) {
    // ...
});

Storing reference to module:

var demo = angular.module("demo", []);
demo.controller('DemoController', function ($scope) {
    // ...
});
demo.directive('myDatepicker', function ($parse) {
    // ...
});

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745112226a285650.html

javascriptAdding directive makes controller undefined in angular js codeStack Overflow

最新回复(0)