将 Angular 范围变量传递给 Javascript答案

【问题标题】：Pass Angular scope variable to Javascript将 Angular 范围变量传递给 Javascript
【发布时间】：2013-07-31 09:39:40
【问题描述】：

我有一个 Angular 范围变量 streetName。

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

【问题讨论】：

标签： javascript angularjs

【解决方案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 demo

【讨论】：

但这是返回空值。它无法读取控制器“添加”。
@JPN 似乎元素还没有准备好。尝试将我的代码放入window.onload handler
它的工作:) 但有时它会给出空值。看看我错过了什么.. 非常感谢..!!
@JPN 如果是null，您可以添加一些小的setInterval，它将检查元素/范围，直到它完全准备好。祝你好运！
@chrmiv 我发现了这个问题......我没有在 div 标签中包含 ng-controller，它环绕着 javascript 标签。现在它可以正常工作了。非常感谢..

【解决方案2】：

您可以通过 $window 服务将您的作用域增值税传递给普通 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>

但请记住，这是解决方法，而不是最佳解决方案

【讨论】：

这太完美了！万一不清楚，您可以使用 javascript 窗口对象访问分配给角度 $window 对象的值。
@Sergey Panfilov : 但是我如何才能在 myscript 值中访问该值？

【解决方案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>

【讨论】：

不工作，我在控制台中得到“我得到了街道名称 {{name}}”

【解决方案4】：

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

HTML

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

Javascript

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

$(document).ready... 对于设置变量的角度时间很重要。

【讨论】：

【解决方案5】：

在 Angular 11 / typescript 4.3.2 中，我可以通过将其添加到我的 ngOnInit 来做到这一点：

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

然后可以访问我覆盖的 javascript chartjs 绘制函数中的变量：

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

不错的解决方案如果您不存储敏感数据。

我需要使用在我的 ngOnInit 函数中定义的变量，以编程方式告诉chartsjs 何时圆条形图边缘以及何时不圆角。

【讨论】：