Menu
Here is my html and angular js code
<html>
<head>
<title></title>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function DemoController($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 doesn't work and gives output
Date Of Birth:
Current user's date of birth: {{user.dateOfBirth}}
But if i remove ="demo" from ng-app="demo" in the div it works...
340
When you assign a name to the ng-app directive, you essentially create a module with that name. In this module, you will then have to define your directives, services, filters and configurations.
In your case, when you assigned the name "demo", you created a module named "demo". Function DemoController now is no longer part of this module.
To use this function AND assign a module to your application, you need to use the following way of defining a controller:
var app = angular.module("demo", []);
app.controller('DemoController', [function () {
//The body of demo controller
}]);
This way, the application knows which module's controller needs to be associated for the scope of the corresponding view.
EDIT: The ng-app directive reference
182
My solution works, try this : http://plnkr.co/edit/zwOKitT8wznO17yZfz15?p=preview
<body ng-app="">
<div ng-controller="DemoController">
Date Of Birth:
<br>
Current user's date of birth: <span id="dateOfBirthDisplay"><span ng-bind="user.dateOfBirth"></span></span>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
