AngularJS-范围未在HTML中呈现变量

Question

我有下面的AngularJS代码。

执行以下代码后，不显示当前时间：

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

Answer 1

保持控制器为父标签。 然后它将起作用。

更正了以下代码：

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

Answer 2

由于ng-bind不知道$scope.timeString ，因此timeString值未绑定，因为它不在控制器内部。

尝试这个

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

AngularJS-范围未在HTML中呈现变量

问题描述

2 个解决方案

解决方案1
0 2018-03-04 17:32:45

解决方案2
0 2018-03-04 17:32:46

AngularJS-范围未在HTML中呈现变量

问题描述

2 个解决方案

解决方案1 0 2018-03-04 17:32:45

解决方案2 0 2018-03-04 17:32:46

解决方案1
0 2018-03-04 17:32:45

解决方案2
0 2018-03-04 17:32:46