Thừa kế cho phạm vi trong AngularJS

Question

Trong phạm vi bộ điều khiển chính, tôi đã xác định selectedItem được đặt thành 'x'. Sau đó, trong phạm vi nhỏ, tôi đã xác định selectedItem sử dụng ngModel:

<div ng-app> 
    <div ng-controller="CtrlA"> 
     <div ng-controller="CtrlB"> 
     <select ng-model="selectedItem" ng-options="item for item in items"> 
     </select> 
     </div> 
    </div> 
</div> 

function CtrlA($scope) { 
    $scope.selectedItem = 'x'; 
    $scope.items = ['x', 'y']; 
} 

function CtrlB($scope) {} 

Khi trang web được tải, các selectedItem được thiết lập đúng để 'x' như mong đợi. Khi tôi chọn 'y', selectedItem trong phạm vi CtrlB $ cho 'y' như mong đợi.

Nhưng khi tôi kiểm tra $scope.selectedItem trong phạm vi CtrlA (sử dụng batarang của AngularJS), nó cung cấp 'x'.

jsFiddle: Trang http://jsfiddle.net/sudhh/GGKjp/2/

Preview: http://fiddle.jshell.net/sudhh/GGKjp/2/show/light/ (để kiểm tra với angularjs batarang)

Tại sao $scope.selectedItem trong CtrlA phạm vi không nhận được cập nhật để 'y'? Giải thích là gì?

Tôi không muốn sử dụng sự kiện hoặc rootScope để cập nhật selectedItem trong phạm vi chính (cho mục đích học tập).

Answer 1

Nếu bạn cố gắng liên kết với nguyên thủy được khai báo trên phạm vi chính, thì mục được chọn trong phạm vi con sẽ đánh bóng thuộc tính có cùng tên trong phạm vi chính.

Trong trường hợp này có 3 lựa chọn

1. xác định đối tượng trong các phụ huynh cho mô hình của bạn, sau đó tham chiếu đến một tài sản của đối tượng trong con : ref.selectedItem
2. sử dụng $ parent.selectedItem (không phải lúc nào cũng có thể, nhưng dễ hơn 1. nếu có thể)
3. xác định chức năng trên phạm vi gốc và gọi nó từ con, chuyển giá trị ban đầu lên cha mẹ (không phải lúc nào cũng có thể)

Thông tin thêm về nó trên https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

Bạn có thể tìm fiddle cập nhật bằng cách sử dụng phương pháp tiếp cận đầu tiên tại http://jsfiddle.net/sudhh/XU2rP/1/

function CtrlA($scope) { 
    $scope.items = ['x', 'y']; 
    $scope.ref = { 
    selectedItem: 'x' 
    }; 
} 

Answer 2

Tôi đã nhận thấy trong các trường hợp tương tự mà AngularJS không xem selectedItem đúng cách. Cách duy nhất tôi tìm thấy là khởi tạo selectedItem với mục nhập từ mảng items. Hãy thử những điều sau đây:

function CtrlA($scope) { 
    $scope.items = ['x', 'y']; 
    $scope.selectedItem = $scope.items[0]; 
}