将 angularJs 变量传递给 javascript 变量答案

【问题标题】：Pass angularJs variable to javascript Variable将 angularJs 变量传递给 javascript 变量
【发布时间】：2017-03-29 20:55:29
【问题描述】：

我有 Angularjs 变量，我想传入 javascript 变量。我找到了解决方案 here 所以它没有用。我的代码：

<script>
var demo=angular.module('demo', []);
demo.controller('metrics', function($scope, $http) {
$http.get('http://localhost:8080/metrics').then(function(response) 
    {
     $scope.metrics = response.data;            
    });
    });
</script>

<div ng-controller="metrics">
<p>{{metrics}}<p>
</div>
<script>
var e = angular.element(document.querySelector('[ng-controller="metrics"]')); 
var e1 = e.scope().metrics ; 
alert(e1)   
</script>

我从 {{metrics}} 得到了结果，但 e1 没有返回任何东西。
感谢您的帮助。

【问题讨论】：

您的问题是时机。 $scope.metrics 将比您尝试获取它晚一些。无论如何，像这样戳穿 Angular 的内部是一个坏主意。你应该在那里对那一点Javascript进行角化；你到底想做什么？

标签： javascript angularjs angularjs-scope

【解决方案1】：

从您当前的代码来看，到 JS 代码执行时，它不会包含 metrics 数据。

JS 代码应该写在 API 调用的then 响应中，

如果这样做，JS 代码将在 metrics 获取值后被调用。

var demo=angular.module('demo', []);
demo.controller('metrics', function($scope, $http) {
   $http.get('http://localhost:8080/metrics').then(function(response) 
    {
       $scope.metrics = response.data;            
       var e = angular.element(document.querySelector('[ng-controller="metrics"]')); 
       var e1 = e.scope().metrics ; 
       alert(e1);
    });
});

【讨论】：

当然，这不是实际上“将值传递给Javascript”；既然你在回调中做你的工作，那么绝对没有必要和document.querySelector等一起唱歌跳舞，只要alert(response.data)就可以了。
@deceze，提问者只是想将结果传递给javascript variable。我知道结果是直接的。但是由于他渴望使用 Javascript 传递给 js 变量，我刚刚解决了他面临的问题。就问题而言，我的回答是正确的。无需投反对票。

【解决方案2】：

angular.element() 是 angular 中获取原始 DOM 的函数

如果你想得到一个特定的<p> 然后分配 id 属性在它上面

使用原始 DOM，您可以添加属性、添加类或其他 (check this link for more info)

但如果你想用metrics 做某事，那么在你从$http 得到它之后使用$scope.metrics

<div ng-controller="metricsCtrl">
  <p id="metric">{{metrics}}<p>
</div>

<script>
  var demo=angular.module('demo', []);
  demo.controller('metricsCtrl', function($scope, $http) {
  $http.get('http://localhost:8080/metrics').then(function(response) 
      {
       $scope.metrics = response.data;

       // you can do whatever with $scope.metrics here
       console.log($scope.metrics);

      });
  var e = angular.element(document.querySelector('#metric'));
  console.log(e);
  e.addClass('some-class');     // here p will be <p class="some-class" id="metric">{{metrics}}<p>
  });
</script>

【讨论】：