AngularJS - scope is not rendering the variables in HTML
Question
I have the below AngularJS code.
The current time is not displayed after executing the below code:
<html ng-app="a">
<head>
<title>Clock App</title>
<script src="angular.js"></script>
</head>
<body>
<h1>Clock Application</h1>
<div ng-controller="t"></div>
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<script>
var d = angular.module("a", []);
d.controller("t", function ($scope) {
var currentDate = new Date();
$scope.timeString = currentDate.toTimeString();
});
</script>
</body>
</html>
2 answers
solution1
0 2018-03-04 17:32:45
Keep the controller to parent tag. Then it will work.
Corrected code below:
<html ng-app="a"> <head> <title>Clock App</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> </head> <body ng-controller="t"> <h1>Clock Application</h1> <div></div> <p> The current time is </p> <p ng-bind="timeString"></p> <p>{{50+3}}</p> </div> <script> var d = angular.module("a", []); d.controller("t", function ($scope) { var currentDate = new Date(); $scope.timeString = currentDate.toTimeString(); }); </script> </body> </html>
solution2
0 2018-03-04 17:32:46
The timeString value is not binding because the ng-bind is not aware of the $scope.timeString , since it is not inside the controller.
Try this
<div ng-controller="t">
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<html ng-app="a"> <head> <title>Clock App</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> </head> <body> <h1>Clock Application</h1> <div ng-controller="t"> <p> The current time is </p> <p ng-bind="timeString"></p> <p>{{50+3}}</p> </div> <script> var d = angular.module("a", []); d.controller("t", function ($scope) { var currentDate = new Date(); $scope.timeString = currentDate.toTimeString(); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
$scope.$apply not working when injecting html with scope variables - AngularJs
AngularJS, Angular-Material - HTML Not rendering despite object present on $scope
angularJS $scope variables
Setting $scope variables AngularJS
AngularJS Scope Variables not Updating
AngularJS : view variables in scope
accessing angularjs scope variables and assigning it to script tag attributes in html
AngularJS - rendering nested scope vars
AngularJS $scope data not rendering in view
AngularJS passing HTML into $scope
Related Tags