Vượt qua phạm vi góc biến đổi thành Javascript

Question

Tôi đang có một biến phạm vi góc tênName.

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

Tôi làm cách nào để truy cập streetName trong javascript được xác định trong phạm vi điều khiển (thêm) này. Hãy giúp tôi.

<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

Bằng cách này là dài nhưng nó hoạt động:

angular.element(document.querySelector('[ng-controller="add"]')).scope().streetName 

có thể đọc thêm:

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; 

Và nó ngắn hơn nhiều nếu bạn đang sử dụng jQuery:

var street_name = $('[ng-controller="add"]').scope().streetName; 

Liên kết đến jsfiddle demo

Answer 2

Bạn có thể chuyển vat phạm vi của bạn đến các biến số js chung với $ window dịch vụ.

Như thế này:

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

và đính kèm js của bạn sau đó trong mã comon js như thế:

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

Nhưng hãy nhớ rằng đó là cách giải quyết, giải pháp không tốt nhất

Answer 3

tôi đối mặt với một vấn đề tương tự. Tôi tìm thấy một công việc xung quanh. Nó làm việc tốt cho tôi nhưng không chắc đó có phải là cách tiếp cận đúng hay không.

Tạo trường nhập ẩn trong html và chỉ định giá trị của bạn từ góc cạnh. Truy cập giá trị này bằng javascript. Hãy chắc chắn rằng bạn tạo nó trước thẻ script của bạn để nó sẽ được khởi tạo khi bạn đến thẻ script của bạn.

Something như thế này:

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