将Angular作用域变量传递给Javascript

Question

我有一个 Angular 作用域变量 streetName。

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

我该如何在这个控制器（add）的作用域下访问 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>

- JPN

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

- Ivan Chernykh

---

但是这返回了空值。它无法读取控制器“add”。 - JPN

@JPN 看起来元素还没有准备好。尝试将我的代码放在 window.onload 处理程序中。 - Ivan Chernykh

它正在工作 :) 但有时会返回 null。看看我错过了什么.. 谢谢！ - JPN

@JPN 如果出现“null”的情况，您可以添加一些小的“setInterval”，它将检查元素/作用域，直到完全准备就绪。祝您好运！ - Ivan Chernykh

@chrmiv 我找到了问题所在...我没有在包含 JavaScript 标签的 div 标签中包含 ng-controller...现在它完美地工作了。非常感谢你。 - JPN

Answer 2

你可以使用 $window 服务将你的作用域变量传递给 common js 变量。

像这样：

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

然后在通用JS代码中添加你的JS，像这样：

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

但要记住这只是一种解决办法，而不是最佳方案。

- S Panfilov

---

这太完美了！以防不清楚，您可以使用JavaScript window对象访问分配给角度$window对象的值。 - Dr. Hilarius

@Sergey Panfilov: 但是我该如何在我的脚本中访问那个值呢？ - lalitpatadiya

Answer 3

我遇到了类似的问题。我找到了一个解决方法，对我很有效，但不确定是否是正确的方法。

在HTML中创建一个隐藏的输入字段，并将其赋值为来自Angular的值。在JavaScript中访问此值。确保在脚本标记之前创建它，以便在到达脚本标记时初始化它。

类似于这样：

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

- Divije Narasimhachar

---

无法工作，我在控制台中得到了“我得到了街道名称{{name}}”。 - khalidh

Answer 4

在Angular 11 / typescript 4.3.2中，我可以通过将以下内容添加到我的ngOnInit中来实现此操作：

window.localStorage.setItem("roundChartEdges","false")

然后我可以在覆盖的JavaScript ChartsJS绘制函数中访问该变量：

Chart['elements'].Rectangle.prototype.draw = function () {
  console.log(window.localStorage.getItem("roundChartEdges"))
  ...
}

如果您没有存储敏感数据，这不是一个坏的解决方案。

我需要在我的 ngOnInit 函数中使用定义的变量来编程告诉 chartsjs 何时要舍入条形图边缘，何时不要。

- Collin

Answer 5

简单、不复杂的jQuery解决方案：

HTML

<div id="data" data-street="{{streetName}}"></div>

Javascript

$(document).ready(function() {
    var streetName = $('#data').data('street');
});  

---

$(document).ready...很重要，它可以给Angular设置变量的时间。

- Jarrod