Передайте переменную scope Angular в Javascript

У меня есть переменная street_name переменной Angular.

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

Как я могу получить доступ к имени улицы в javascript, определенном под этой областью контроллера (добавить). Пожалуйста, помогите.

<div ng-app="addApp" ng-controller="add">
StreetName: {{streetName}}

<script type="text/javascript">
//here i need to access the value of streetName...
</script>

</div>

Ответ 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

Ответ 2

Вы можете передать свой объем vat в обычный js var с помощью службы $window.

Вот так:

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

и присоедините свои js после этого в коде comon js следующим образом:

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

Но имейте в виду, что это обходное решение, а не лучшее решение

Ответ 3

У меня возникла аналогичная проблема. Я нашел работу. Он работал хорошо для меня, но не уверен, что это правильный подход.

Создайте скрытое поле ввода в html и присвойте ему свое значение от angular. Получите доступ к этому значению в javascript. Убедитесь, что вы создали его перед тегом script, чтобы он был инициализирован при достижении тега script.

Что-то вроде этого:

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