Assign JavaScript Variable to AngularJS Scope Object and Display it

Question

I'm new to AngularJS. I was trying to find the center point on the page with JavaScript then bind it to the $scope object. I'm not entirely sure if I bound the JavaScript variables correctly. After I did that, I was trying to preview the values in my HTML page. When I ran the code it threw an error message.

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

score 2 · Accepted Answer · 2017-08-22 17:26:15Z

2

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>

edited Aug 22, 2017 at 17:26

answered Aug 22, 2017 at 17:21

user7110739

Sign up to request clarification or add additional context in comments.

Comments

felixmosh · Accepted Answer · 2017-08-22 17:21:18Z

0

You have different problem at your snippet. You put script tag on javascript section.

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>

answered Aug 22, 2017 at 17:21

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Collectives™ on Stack Overflow

Assign JavaScript Variable to AngularJS Scope Object and Display it

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related