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