将angular度范围variables传递给Javascript

我有一个angular度范围variablesstreetName。

<script type="text/javascript"> angular.module('addApp').controller('add', ['$scope',function($scope) { $scope.streetName = "Bonita Ln"; }]); </script> 

如何访问此控制器（添加）范围下定义的javascript中的streetName。 请帮忙。

 <div ng-app="addApp" ng-controller="add"> StreetName: {{streetName}} <script type="text/javascript"> //here i need to access the value of streetName... </script> </div> 

Answer 1

这种方式很长，但它的工作原理：

  angular.element(document.querySelector('[ng-controller="add"]')).scope().streetName 

更可读：

  var dom_el = document.querySelector('[ng-controller="add"]'); var ng_el = angular.element(dom_el); var ng_el_scope = ng_el.scope(); var street_name = ng_el_scope.streetName; 

如果你使用的是jQuery，它会更短：

  var street_name = $('[ng-controller="add"]').scope().streetName; 

链接到jsfiddle演示

Answer 2

您可以通过$ window service将您的范围大桶传递给常见的js var。

喜欢这个：

 angular.module('addApp', []) .controller('add', ['$window', function ($window) { ... $window.streetName = $scope.streetName; ... } 

然后在comon js代码中添加你的js：

 <script type="text/javascript"> document.write("\<script src='...' type='text/javascript'>\<\/script>"); </script> 

但请记住，这是解决方法，而不是最好的解决scheme

Answer 3

我面临类似的问题。 我find了一个工作。 它对我来说效果不错，但不知道这是否正确。

在html中创build一个隐藏的input字段，并从angular度分配它的值。 在JavaScript中访问此值。 确保在脚本标记之前创build它，以便在到达脚本标记时进行初始化。

像这样的东西：

 <div ng-app="addApp" ng-controller="add"> StreetName: {{streetName}} <input type="hidden" id="dummyStreetName" value={{streetName}}> <script type="text/javascript"> console.log("I got the street name "+$("#dummyStreetName").val()); </script> </div>