将角度表达式传递到Javascript

下面我有一个Angular表达式{{USA_Visits.maximum.value |number:0 }}，我希望在JavaScript中使用它来生成图表。这是我当前的代码：将角度表达式传递到Javascript

<!-- Angular expression --> 

{{USA_Visits.maximum.value |number:0 }} 


<!-- Chart code --> 
<script> 
var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "startDuration": 2, 
    "dataProvider": [{ 
     "country": "USA", 
     "visits": {{USA_Visits.maximum.value |number:0 }}, 
     "color": "#FF0F00" 
    }, { 
     "country": "Taiwan", 
     "visits": 500, 
     "color": "#333333" 
    }], 
    "valueAxes": [{ 
     "position": "left", 
     "axisAlpha":0, 
     "gridAlpha":0 
    }], 
    "graphs": [{ 
     "balloonText": "[[category]]: <b>[[value]]</b>", 
     "colorField": "color", 
     "fillAlphas": 0.85, 
     "lineAlpha": 0.1, 
     "type": "column", 
     "topRadius":1, 
     "valueField": "visits" 
    }], 
    "depth3D": 40, 
    "angle": 30, 
    "chartCursor": { 
     "categoryBalloonEnabled": false, 
     "cursorAlpha": 0, 
     "zoomable": false 
    }, 
    "categoryField": "country", 
    "categoryAxis": { 
     "gridPosition": "start", 
     "axisAlpha":0, 
     "gridAlpha":0 

    }, 
    "export": { 
     "enabled": true 
    } 

}, 0); 
</script> 

<!-- HTML --> 
<div id="chartdiv"></div>

JS代码内显然分配"visits": {{USA_Visits.maximum.value |number:0 }}不工作。我怎样才能做到这一点？

谢谢

来源

2017-09-14 Henry Blue

你能发布你得到的错误吗？这将有助于确定为什么该财产没有得到你想要的价值。 – henrisycip

[如何在控制器中使用过滤器？]（https://stackoverflow.com/questions/14302267/how-to-use-a-filter-in-a-controller） – Icycool

可能的重复我不认为这是一个重复的@Icycool ... 这是我试图做的JSfiddle。在这种情况下，我想将{{quantity * cost}}传递给Javascript。 https://jsfiddle.net/7hj7huj3/ –

这个怎么样。

<div id="chartdiv"></div> 
<div ng-app="" ng-init="quantity=2000;cost=2"> 
    <p id="usaVal">USA Value: {{ quantity * cost }}</p> // give id as 'usaVal' 
</div>

，并加入到JS部分

var usaVal = document.getElementById('usaVal');

。

UPDATE

使用console.log(usaVal.innerHTML);，将打印像 '美国价值：4000'。

所以你切片usaVal这样。

var usaVal = document.getElementById('usaVal'); 
var val = usaVal.innerHTML; 
val = parseInt(val.slice(val.indexOf(':')+2, val.length)); 
var chart = AmCharts.makeChart("chartdiv", { 
    "theme": "light", 
    "type": "serial", 
    "startDuration": 2, 
    "dataProvider": [{ 
     "country": "USA", 
     "visits": val, 
    // I want to use {{ quantity * cost }} instead of 4000 
     "color": "#FF0F00" 
    }, 
    .... 
});

来源

2017-09-14 05:03:26

我已经在小提琴上运行你的解决方案：https://jsfiddle.net/mr9dc0qo/2/，因为你可以看到美国没有列，所以我认为它不工作。我是否正确实施了它？ –

@HenryBlue这是因为usaVal返回该HTML元素的整个文本。您可以使用console.log来检查打印的值。也许usaVal回报包括'美国价值：'。所以你必须切割该字符串 –

@HenryBlue我更新了这个 –

EDIT2

参考这个最新Fiddle

请运行下面的代码，以及

angular.module('myApp', []); 
 

 
angular 
 
    .module('myApp') 
 
    .controller('stretch',function($scope){ 
 
    \t 
 
    }); 
 

 
    /**Below code will be out of angular context**/ 
 
    angular.element(document).ready(function() { 
 
     var scope = angular.element(document.getElementById('access')).scope(); 
 
\t \t 
 
     var chart = AmCharts.makeChart("chartdiv", { 
 
      "theme": "light", 
 
      "type": "serial", 
 
      "startDuration": 2, 
 
      "dataProvider": [{ 
 
       "country": "USA", 
 
       "visits": scope.quantity*scope.cost, 
 
      // I want to use {{ quantity * cost }} instead of 4000 
 
       "color": "#FF0F00" 
 
      }, { 
 
       "country": "China", 
 
       "visits": 1882, 
 
       "color": "#FF6600" 
 
      }, { 
 
       "country": "Japan", 
 
       "visits": 1809, 
 
       "color": "#FF9E01" 
 
      }, { 
 
       "country": "Germany", 
 
       "visits": 1322, 
 
       "color": "#FCD202" 
 
      }, { 
 
       "country": "UK", 
 
       "visits": 1122, 
 
       "color": "#F8FF01" 
 
      }, { 
 
       "country": "France", 
 
       "visits": 1114, 
 
       "color": "#B0DE09" 
 
      }, { 
 
       "country": "India", 
 
       "visits": 984, 
 
       "color": "#04D215" 
 
      }, { 
 
       "country": "Spain", 
 
       "visits": 711, 
 
       "color": "#0D8ECF" 
 
      }, { 
 
       "country": "Netherlands", 
 
       "visits": 665, 
 
       "color": "#0D52D1" 
 
      }, { 
 
       "country": "Russia", 
 
       "visits": 580, 
 
       "color": "#2A0CD0" 
 
      }, { 
 
       "country": "South Korea", 
 
       "visits": 443, 
 
       "color": "#8A0CCF" 
 
      }, { 
 
       "country": "Canada", 
 
       "visits": 441, 
 
       "color": "#CD0D74" 
 
      }, { 
 
       "country": "Brazil", 
 
       "visits": 395, 
 
       "color": "#754DEB" 
 
      }, { 
 
       "country": "Italy", 
 
       "visits": 386, 
 
       "color": "#DDDDDD" 
 
      }, { 
 
       "country": "Taiwan", 
 
       "visits": 338, 
 
       "color": "#333333" 
 
      }], 
 
      "valueAxes": [{ 
 
       "position": "left", 
 
       "axisAlpha":0, 
 
       "gridAlpha":0 
 
      }], 
 
      "graphs": [{ 
 
       "balloonText": "[[category]]: <b>[[value]]</b>", 
 
       "colorField": "color", 
 
       "fillAlphas": 0.85, 
 
       "lineAlpha": 0.1, 
 
       "type": "column", 
 
       "topRadius":1, 
 
       "valueField": "visits" 
 
      }], 
 
      "depth3D": 40, 
 
      "angle": 30, 
 
      "chartCursor": { 
 
       "categoryBalloonEnabled": false, 
 
       "cursorAlpha": 0, 
 
       "zoomable": false 
 
      }, 
 
      "categoryField": "country", 
 
      "categoryAxis": { 
 
       "gridPosition": "start", 
 
       "axisAlpha":0, 
 
       "gridAlpha":0 
 

 
      }, 
 
      "export": { 
 
       "enabled": true 
 
      } 
 

 
     }, 0); 
 
    });

#chartdiv { 
 
    width: 100%; 
 
    height: 500px; 
 
} \t \t

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="//code.angularjs.org/1.5.4/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="stretch" ng-init="quantity=2000;cost=2"> 
 
    {{quantity}} 
 
    <p id="access">USA Value: {{ quantity * cost }}</p> 
 
</div> 
 
<div id="chartdiv"></div>

来源

2017-09-14 05:07:24 Rahul

我已将你的小提琴复制到单独的小提琴中，它不起作用？当我运行它时，没有图表？在这里看到： https://jsfiddle.net/daavzz8b/ –

@HenryBlue请参阅更新回答 – Rahul

感谢您的回应，但我不想在JavaScript中硬编码值。我希望能够将AngularJS表达式传递给javascript，而不是其他方式。你有任何解决方案吗？ –

将角度表达式传递到Javascript

回答

相关问题