javascript - 将 JavaScript 变量分配给 AngularJS 范围对象并显示它

Question

我是 AngularJS 新手。我试图用 JavaScript 找到页面上的中心点，然后将其绑定(bind)到 $scope 对象。我不完全确定我是否正确绑定(bind)了 JavaScript 变量。完成此操作后，我尝试预览 HTML 页面中的值。当我运行代码时，它抛出了一条错误消息。

<script type="text/javascript">
    var Page_Center_Width = $(window).width() / 2;
    var Page_Center_Height = $(window).height() / 2;
</script>

<script>
      var app = angular.module('myApp', []);
      app.controller('mainCtrl', function ($scope, $interval, $window) {
            $scope.Window_Width =  $window.Page_Center_Width;
            $scope.Window_Height = $window.Page_Center_Height;
      });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl" >
    <div >Window-Width: {{Window_Width}}</div>
    <div >Window-Height: {{Window_Height}}</div>
</div>

Answer 1

var Page_Center_Width = $(window).width() / 2;
var Page_Center_Height = $(window).height() / 2;
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $interval, $window) {
    $scope.Window_Width = $window.Page_Center_Width;
    $scope.Window_Height = $window.Page_Center_Height;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">
    <div>Window-Width: {{Window_Width}}</div>
    <div>Window-Height: {{Window_Height}}</div>
</div>