Tôi đã biết cách hoạt động của tính năng chuyển đổi (chỉ trong mức đầu tiên tôi đoán), bUt Tôi có câu hỏi về phạm vi của mục được nhúng trong lồng nhau.Nested - transcluded items - làm rõ phạm vi?
Ok vì vậy tôi có mã này:
<body ng-app="docsTabsExample" ng-controller="ctrl">
<my-tabs>
<my-pane title="Hello">
<h4>Hello , The value of "i" is => {{i}}</h4>
</my-pane>
</my-tabs>
</body>
Về cơ bản tôi có một controller, <my-tabs> và <my-pane >.
Nhìn vào myTabs chỉ:
.directive('myTabs', function()
{
return {
restrict: 'E',
transclude: true,
scope:
{},
controller: ['$scope', function($scope)
{
$scope.i = 2;
}],
template: '<div ng-transclude></div>'
};
})
Tôi biết rằng nội dung của Chỉ thị sẽ có quyền truy cập vào phạm vi các ngoài chỉ thị của
Vì vậy, phần màu vàng sẽ được tiếp cận với bên ngoài phạm vi (là phạm vi điều khiển chính):
Đây là mã cho myPane chỉ: Chương trình
.directive('myPane', function()
{
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope:
{
},
controller: function($scope)
{
$scope.i = 4; //different value
},
template: '<div ng-transclude></div>'
};
})
bắt đầu với:
.controller('ctrl', function($scope)
{
$scope.i = 1000;
})
Đầu ra của chương trình là:
Xin chào, Giá trị của "i "is => 1000
Nhưng
Theo tài liệu: myPane's dữ liệu nhúng nên có quyền truy cập đến phạm vi bên ngoài của các chỉ thị đó là myTabs chỉ thị trong đó có giá trị i=2.
Nhưng myPane có bị cô lập phạm vi vì vậy nó KHÔNG kế thừa phạm vi từ myTabs.
Câu hỏi
Vì vậy, nó đi một cấp hơn cao để phạm vi của bộ điều khiển để có được i=1000 ?? (Làm rõ, tôi không hỏi làm thế nào tôi có thể làm cho i nhận được một giá trị khác - Tôi hỏi tại sao/làm thế nào nó có giá trị là 1000).
Tôi có nghĩa là phân cấp phạm vi trông như thế nào ở đây?
Có phải như thế này không?
controller's scope
|
+--------+---------+
| |
myTabs's mypanes's
transcluded transcluded
data's scope data's scope
các tài liệu nói:
Tùy chọn transclude thay đổi cách phạm vi được lồng nhau. Nó làm cho nó để nội dung của một chỉ thị transcluded có bất kỳ phạm vi nào là bên ngoài chỉ thị, thay vì bất kỳ phạm vi nào ở bên trong. Trong làm như vậy, nó cung cấp cho các nội dung truy cập vào phạm vi bên ngoài.
Nhưng phạm vi nào bên ngoài của chỉ thị myPAne có?
Nói cách khác, tại sao/cách hiện i=1000?
EDIT TỪ OP SAU ĐÁP
Sau khi cài đặt và cấu hình kính tiềm vọng (từ @MarkRajcok) bây giờ tôi có thể nhìn thấy nó bằng mắt:
Cả myTab và myPane có 'transclude: true'. myPane được lồng trong myTab. Bạn đang đưa myPane phạm vi myTab, và sau đó myTab phạm vi của ctrl, cung cấp cho myPane phạm vi của ctrl. – jperezov