2013-06-09 44 views
8

Tôi đang cố cập nhật giá trị phạm vi trên cửa sổ mẹ từ cửa sổ bật lên con. Nhưng bất cứ khi nào tôi cố gắng truy cập vào phạm vi cửa sổ chính, nó sẽ trả về không xác định. Vì nó liên quan đến hai cửa sổ, tôi không thể tạo ra một fiddle cho việc này. Mẫu mã được dán dưới đây.Truy cập vào cửa sổ cha góc cạnh từ cửa sổ con

Trang chính (main.html)

<!doctype html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script> 
    var myApp = angular.module('myApp',[]); 
    function MyCtrl($scope) { 
     $scope.name = 'Superhero'; 
    } 
    </script> 
    </head> 
    <body ng-app="myApp"> 
    <div id="ctrl" ng-controller="MyCtrl"> 
     Hello, {{name}}! 
     <input type="button" value="Open popup!!" onclick="window.open('child.html');"/> 
    </div> 
    </body> 
</html> 

cửa sổ Child (child.html)

<!doctype html> 
<html > 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
    <script> 
    function change(){ 
     var e = window.opener.document.getElementById('ctrl'); 
     var ae = angular.element(e); 
     var s = ae.scope(); 
     s.name="New Superhero"; 
     s.$apply(); 
    } 
    </script> 
    </head> 
    <body> 
     <input type="button" value="Update parent scope!" onclick="change();"/> 
    </body> 
</html> 

đây bất cứ khi nào tôi cố gắng truy cập vào phạm vi từ các yếu tố góc cạnh, như thể hiện Nhưng khi cùng một mã được chuyển đến một hàm trong cửa sổ chính [chỉ khác biệt về cách phần tử 'ctrl' được truy cập], nó hoạt động tốt và tôi đã có thể cập nhật biến phạm vi. Bất cứ ai có thể chỉ ra những gì thực sự là đi sai ở đây? Cảm ơn

+0

Tôi không chắc chắn nếu điều này sẽ làm việc như hai cửa sổ có liên quan, như cửa sổ con có thể không có quyền truy cập vào các script \ chức năng nạp vào cha mẹ. Tại sao bạn không nhìn vào các tùy chọn như Angularstrap, trong đó có một mô hình popup http://mgcrea.github.io/angular-strap/ – Chandermani

+0

@Chandermani Cảm ơn gợi ý.Requirement nhấn mạnh vào việc sử dụng một popup.So không thể đi với tùy chọn cửa sổ phương thức. Ngoài ra, cửa sổ con sẽ có thể truy cập dom và tập lệnh trên cửa sổ chính. Vì vậy, tôi tin rằng một cái gì đó khác là sai ở đây – Bibin

Trả lời

10

Sử dụng angular tham khảo từ mở:

function change() { 
    var s = window.opener.angular.element('#ctrl').scope(); 
    s.name="New Superhero"; 
    s.$apply(); 
} 
+3

Điều này sẽ không còn hoạt động nếu bạn tắt thông tin gỡ lỗi https://docs.angularjs.org/api/ng/provider/$compileProvider#debugInfoEnabled. Vì nó được khuyến khích để vô hiệu hóa gỡ lỗi cho các ứng dụng sản xuất sau đó giải pháp này sẽ không hoạt động. – PickYourPoison

9

Tôi đã có nhu cầu tương tự và có cùng sự cố khi truy cập phạm vi bằng cách sử dụng angular.element. Tôi đã có thể giải quyết nó như sau mặc dù:

Trong điều khiển/mẹ chính bạn làm điều gì đó như thế này:

$scope.food = 'Mac & Cheese'; 
window.$windowScope = $scope; 
$window.open('views/anotherWindow.html', '_blank','menubar=yes,toolbar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes,personalbar=yes'); 

Sau đó, trong bộ điều khiển cửa sổ con bạn có thể truy cập $ windowScope như thế này:

$scope.parentWindow = window.opener.$windowScope; 
console.log($scope.parentWindow.food); 

Cách thay thế để đưa dữ liệu trực tiếp vào phạm vi sẽ là sử dụng phạm vi cửa sổ $ là broadcast and/or emit events, là cách ưu tiên của giao tiếp bộ điều khiển chéo trong góc.

+0

làm thế nào để bạn di chuyển phạm vi vào cửa sổ con. Nó nói phạm vi không xác định – Andrei

Các vấn đề liên quan