Angular JS tuyên truyền biến phạm vi con thay đổi thành phạm vi cha mẹ

Question

Làm cách nào để thay đổi biến và dễ dàng truyền chúng trở lại ParentCtrl mặc dù var mới 'được khởi tạo trong ChildCtrl? Thêm điểm cho tối thiểu để có $ trên và $ đồng hồ của (làm cho nó dễ dàng hơn để thực hiện)

ParentCtrl

• ChildCtrl/ChildCtrl2/ChildCtrl3/ChildCtrl4

  • Xem

ChildCtrl của tôi chỉ đủ khác nơi tôi không thể tóm tắt dễ dàng bố cục aster và ng-view, nhưng tất cả đều phụ thuộc vào các hàm giống nhau trong ParentCtrl.

$ scope.searchĐiều khoản được xác định trong ParentCtrl nhưng hộp nhập với ng-model = 'searchTerms' nằm trong chế độ xem của bộ điều khiển con. Khi thay đổi này var nó không được phản ánh trong ParentCtrl chỉ ChildCtrls.

Ví dụ: http://jsfiddle.net/JHwxP/22/

HTML phần

<div ng-app> 
    <div ng-controller="Parent"> 
     parentX = {{x}} <br/> 
     parentY = {{y}}<br/> 
     <div ng-controller="Child"> 
      childX = {{x}}<br/> 
      childY = {{y}}<br/> 
      <a ng-click="modifyBothScopes()">modifyBothScopes</a><br> 
      <br> 
      The changes here need to appear in 'Parent'. <input ng-model='y'> 
     </div> 
    </div> 
</div> 

Controller

function Parent($scope) { 
    $scope.x= 5; 
    $scope.y= 5; 
} 

function Child($scope) { 
    $scope.modifyBothScopes= function() { 
     $scope.$parent.x++; 
    }; 
} 

CẬP NHẬT

Tôi hiện đang cố gắng một cách tiếp cận dịch vụ chia sẻ: https://gist.github.com/exclsr/3595424

CẬP NHẬT

Cố gắng một Emit/hệ thống phát sóng

SOLVED Vấn đề: tôi đã lưu trữ $ scope.searchTerms trong các phụ huynh và khi thay đổi đã tạo ra một không gian trong con $ phạm vi.

Giải pháp: Tôi đã thực hiện $ scope.search.terms trong cha mẹ và khi được thay đổi ở trẻ, nó sẽ phát sinh đến cha mẹ.

Ví dụ: http://jsfiddle.net/JHwxP/23/

Answer 1

Điều này là do cách thức hoạt động thừa kế nguyên mẫu.

Khi bạn yêu cầu $scope.x trong bộ điều khiển con, nó sẽ kiểm tra xem x có được xác định trên phạm vi của nó hay không và nếu không, hãy tìm x trong phạm vi gốc.

Nếu bạn chỉ định cho thuộc tính của trẻ em là x, nó chỉ sửa đổi phạm vi con.

Cách dễ dàng để giải quyết vấn đề này và nhận hành vi chia sẻ là sử dụng đối tượng hoặc mảng.

function ParentCtrl($scope) { 
    $scope.model = {x: 5, y: 5}; 
} 

function ChildCtrl($scope) { 
    $scope.update = function(x, y) { 
    $scope.model.x = x; 
    $scope.model.y = y; 
    }; 
} 

Ở đây, những thay đổi sẽ được hiển thị trong cả hai phạm vi, vì $scope.model sẽ đề cập đến cùng một đối tượng ở cả phạm vi phụ huynh và trẻ em.

John Lindquist có số video on this.

Answer 2

Một giải pháp khác không liên quan đến việc tạo một loạt các đối tượng để chuyển qua tham chiếu là tạo các hàm setter trong bộ điều khiển chính.

function ParentCtrl($scope) { 
    $scope.x = 5; 
    $scope.y = 5; 

    $scope.setX = function(value) { 
    $scope.x = value; 
    } 

    $scope.setY = function(value) { 
    $scope.y = value; 
    } 
} 

function ChildCtrl($scope) { 
    $scope.update = function(x, y) { 
    $scope.setX(x); 
    $scope.setY(y); 
    }; 
} 

Tôi thấy điều này sẽ rõ ràng hơn khi có thể không có dữ liệu là một phần của cùng một đối tượng.

Bạn cũng có thể phát điên lên và làm điều gì đó như thế này ở trẻ em:

function ChildCtrl($scope) { 
    var superSetX = $scope.setX; 
    $scope.setX = function(value) { 
    superSetX(value * 2); 
    }; 
    ... 
} 

Answer 3

tôi đang tìm kiếm một cái gì đó như thế này. Giải pháp đầu tiên đến sau khi đọc this. Bạn có thể chia sẻ một mô hình cha với một bộ điều khiển con.

Here is an example. Tôi thậm chí còn sử dụng một loạt các mục để chứng minh quan điểm của tôi. ChildController là thay đổi cha mẹ của mình, giống như tất cả chúng đều là một phần của cùng một vũ trụ.