AngularJSスコープオブジェクトにJavaScript変数を割り当てて表示する

Question

AngularJSが初めてです。私はJavaScriptでページ上の中心点を見つけようとしていましたが、それを$ scopeオブジェクトにバインドしました。 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>

Answer 2

あなたのスニペットで別の問題を抱えています。 javascriptセクションに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 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> 
 
<script type="text/javascript"> 
 
    var Page_Center_Width = 3434; 
 
    var Page_Center_Height = 1222; 
 
</script>