Question

我想要传递javascript变量的Angularjs变量。我找到了解决方案 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 没有返回任何内容。
谢谢你的帮助。

Answer 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);
    });
});

Answer 2

angular.element（）是一个角度函数，用于获取原始DOM

如果您想获得特定的<p>，请在其上分配ID属性

使用该原始DOM，您可以添加属性，添加类或其他（check this link for more info）

但如果您想对metrics执行某些操作，请在从$scope.metrics

获取后再使用$http

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

将angularJs变量传递给javascript变量

2 个答案: