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

但請記住，這是解決方法，而不是最佳解決方案

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...對於給角度時間設置變量很重要。