AngularJS 中没有计算值的可见输出

Question

我有点困惑：我目前正在使用 AngularJS (1.8) 进行一个项目，我打算在其中进行一些计算。现在奇怪的是：在我的控制器中，所有值都出现并被使用，但在我的 HTML 上却没有。摆弄了一下我的HTML，但我仍然无法理解计算值没有显示的事实。
作为基础，我使用了 seed from GitHub - 显然必须更新依赖项。我看起来高低是有原因的，所以要么我在提出问题时很糟糕，要么发生了一些不同的事情，我热衷于使用 AngularJS 文档 - 只是为了解决这个问题。

'use strict';
// Declare app level module which depends on views, and core components
angular.module('Data', []).controller("Main", ["$scope", function($scope) {
  $scope.angle = 17;
  $scope.velocity = 20;
  $scope.height = 0;
  console.log("enter controller");
  //console.log($scope);
  /*$scope.calculate=function(angle,0){
    $scope.time=((angle*Math.PI)/180));
  };
  $scope.calculate=function(0,velocity){
    $scope.distance=velocity*3.6;
  };*/
  $scope.calculate = function(angle, velocity) {
    console.log("enter calc");
    $scope.height = angle * velocity;
    console.log($scope.height, angle, velocity);

    return $scope.height;
  }
  console.log("exit calc");
  //console.log($scope);
}]);

<body ng-app="Data" ng-controller="Main">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <label>Winkel:<input type="number" ng-model="angle"></label>
  <label>Geschwindigkeit:<input type="number" ng-model="velocity"></label>

  <!--<label ng-model="time"></label>
    <label ng-model="distance"></label>
    <label ng-model="height"></label>-->

  <input type="button" value="Berechnen" class='btn btn-default' ng-click="calculate(angle,velocity)">
  <p>Bei einem Winkel {{angle}}° und einer Geschwindigkeit von {{velocity}} erreicht die Masse bei einer Wurfzeit von <span ng-model="time"></span> eine Wurfhöhe <span ng-model="height"></span> und eine Wurfweite <span ng-model="distance"></span></p>
  <!--<ul class="menu">
    <li><a href="#!/view1">view1</a></li>
    <li><a href="#!/view2">view2</a></li>
  </ul>-->

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div>AngularJS seed app: v<span app-version></span></div>
</body>

Answer 1

ng-model是改值，ng-bind是把一个变量的值放到HTML:

'use strict';
// Declare app level module which depends on views, and core components
angular.module('Data', []).controller("Main", ["$scope", function($scope) {
  $scope.angle = 17;
  $scope.velocity = 20;
  $scope.height = 0;

  $scope.calculate = function(angle, velocity) {
    $scope.height = angle * velocity;
  }
}]);

<body ng-app="Data" ng-controller="Main">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  <label>Winkel:<input type="number" ng-model="angle"></label>
  <label>Geschwindigkeit:<input type="number" ng-model="velocity"></label>

  <input type="button" value="Berechnen" class='btn btn-default' ng-click="calculate(angle,velocity)">
  <p>Bei einem Winkel {{angle}}° und einer Geschwindigkeit von {{velocity}} erreicht die Masse bei einer Wurfzeit von <span ng-bind="time"></span> eine Wurfhöhe <span ng-bind="height"></span> und eine Wurfweite <span ng-bind="distance"></span></p>

  <div>AngularJS seed app: v<span app-version></span></div>
</body>

AngularJS 中没有计算值的可见输出

No visible output of calculated values in AngluarJS

angularjs