Question

我有一个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>

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 demo

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

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

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>

Answer 4

简单，简单的jQuery解决方案：

HTML

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

JavaScript

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

$(document).ready...对于赋予角时间来设置变量很重要。

Answer 5

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

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

然后可以访问我覆盖的 javascript chartsjs draw 函数中的变量：

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

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

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

将Angular范围变量传递给Javascript

5 个答案: