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 iJadeiJade 23.9k58 gold badges161 silver badges250 bronze badges1 Answer
Reset to default 5You 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) {
// ...
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745112225a4611915.html
评论列表（0条）