JQuery 的 Angular 等价物答案

【问题标题】：Angular equivalent of J QueryJQuery 的 Angular 等价物
【发布时间】：2016-03-10 20:56:05
【问题描述】：

我很难找到等效的角度，诚然我迫切需要更多的角度经验。使用 J-Query，我能够将加速度计数据实时输出到应用程序，因此它们会随着手机的移动而不断更新。解释一下，屏幕上会有 4 个值不断变化。我可以使用下面的代码来做到这一点，该代码会将结果输出到某个事件的 div 中。

function gotMotion(accelerometer) {
var acc = "";
    acc += "X Motion: " + accelerometer.x.toFixed(3) + " m/s" + "<br/>";
    acc += "Y Motion: " + accelerometer.y.toFixed(3) + " m/s" + "<br/>";
    acc += "Z Motion: " + accelerometer.z.toFixed(3) + " m/s" + "<br/>";
    acc += "Timestamp: " + accelerometer.timestamp;
    $("#targetDiv").html(acc);
}

我试过<div ng-controller = "mycontroller">等方法

将函数或值放入范围内，然后使用{{acc}} 或放入函数并尝试{{acc()}} 显示但会发生两件事

输出最后的值
输出列表中记录的每个值

有什么想法吗？

【问题讨论】：

你想做什么？
您确定您的值在摘要周期内被更改了吗？您是否也在使用正确的范围？如果您在摘要周期之外更改了值，那么角度是不知道的并且摘要周期将不会运行。
您所描述的对于 Angular 来说应该是非常微不足道的。问题是，你没有向我们展示足够的东西来帮助你调试它为什么不工作。我们需要查看您的 Angular 模块定义和您正在使用的 HTML 标记。有了这一点，我毫不怀疑 SO 社区中的某个人将能够帮助您完成这项工作。

标签： angularjs cordova angularjs-directive

【解决方案1】：

首先，使用 Angular，您必须尽可能多地忘记 JQuery 的使用。不要在 Jquery 中使用 DOM 操作。 IT 是非常糟糕的做法，因为 Angular 不会立即注意到变化，并且有 Angular 的方式来做到这一点。

其次，我真的不知道您尝试或想要什么。这是一个如何使用 $scope 在控制器和视图之间共享数据的示例。

这是一个笨蛋：http://plnkr.co/edit/umNjPs5a7mBCkx5mqzwR?p=preview

控制器

// Declare the main module
angular.module('myApp', []);

angular.module('myApp').controller('Ctrl1', ['$scope',  function($scope) {
     // if you to access a variable in the view put it $scope
     $scope.acc = [];
     for(var i=0; i<10;i++){
       $scope.acc.push("X Motion: "+i+" M/S");
     }


}]);

HTML

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css" />

  </head>

  <body>
    <div ng-controller="Ctrl1">
       <!-- ng-repeat iterate over a list --> 
       <ul ng-repeat="a in acc">
          <li>{{a}}</li>
       </ul>
    </div>

    <script src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

【讨论】：