将Angular范围变量传递给Javascript

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

Answer 2

您可以使用$ window服务将范围vat传递给common 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>

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