nội dung bên trong Chỉ thị với cô lập và không bị cô lập phạm vi

tôi thấy khá một hành vi kỳ lạ của phạm vi: true kiểu cho nội dung bên trong của một chỉ thị:nội dung bên trong Chỉ thị với cô lập và không bị cô lập phạm vi

<body ng-init="x=10"> 
    <mydir> 
     {{x}} 
    </mydir> 
</body>

nên {{x}} là nội dung bên trong, và định nghĩa chỉ là:

.directive('mydir', function() { 
    return { 
     scope: {}, 
     link: function(scope){ 
      scope.x = 5; 
     } 
    }; 
});

Khi chúng tôi xác định phạm vi như bị cô lập (phạm vi: {}), nó sẽ tạo ra {{x}} là 10, do đó sử dụng phạm vi bên ngoài. Nhưng khi chúng ta tạo phạm vi mới cho chỉ thị (phạm vi : true), nó sẽ sử dụng nó cho nội dung bên trong và đầu ra 5. Vì vậy, nó sử dụng phạm vi khác nhau cho nội dung bên trong cho 2 trường hợp. Ai đó có thể cho tôi một gợi ý/liên kết đến mã souce/hướng dẫn sử dụng cho lời giải thích cho sự không nhất quán này?

Đây là plnk để phát bằng mã.

UPD: Tôi hiểu thừa kế nguyên mẫu JavaScript là gì. Tôi biết sự khác biệt giữa các loại phạm vi chỉ thị. Và mục tiêu của tôi không phải là hiển thị 5 thay vì 10. Câu hỏi đặt ra là về khuôn mẫu bên trong trong cả hai trường hợp phải được nội suy với phạm vi gốc, không có quyền truy cập vào các thuộc tính của con/phân lập.

Nguồn

2016-01-21 Stepan Suvorov

Xem thêm https://github.com/angular/angular.js/issues/13845#issuecomment-174953398. – gkalpak

vâng, cảm ơn. nó đã được tạo ra bởi tôi :) –

Một có câu trả lời từ các vấn đề góc: https://github.com/angular/angular.js/issues/13845#issuecomment-174953398

Và đây là mã nguồn câu trả lời: https://github.com/angular/angular.js/blob/eae0a1121ffcc636d760463105dcdc548ea47390/src/ng/compile.js#L2538-L2545

var scopeToChild = scope; 
if (newIsolateScopeDirective && (newIsolateScopeDirective.template || newIsolateScopeDirective.templateUrl === null)) { 
     scopeToChild = isolateScope; 
} 
childLinkFn && childLinkFn(scopeToChild, linkNode.childNodes, undefined, boundTranscludeFn);

resume: Trong trường hợp loại phạm vi tách biệt, phạm vi chỉ được cung cấp cho mẫu chỉ thị, nhưng không dành cho nội dung bên trong.

Nguồn

2016-01-26 13:44:59

Đã xảy ra sự cố. Nếu bạn chạy mã của mình trong Chrome với Batarang được bật, bạn có thể thấy khi phạm vi : {} rằng nó thực sự tạo ra một phạm vi mới tách biệt với đầu tiên, hoàn toàn bị ngắt kết nối và đặt biến thành 5. Nhưng chuỗi nội suy của bạn là ràng buộc với phạm vi bên ngoài. Nếu bạn đặt phạm vi : true, nó cũng tạo ra một phạm vi mới được kế thừa từ bên ngoài và nội suy {{x}} được ràng buộc chính xác. Tôi không nghĩ rằng đó là tham số phạm vi trên các chỉ thị đó là không làm việc, một cái gì đó với ràng buộc là không làm việc.

Nguồn

2016-01-23 10:35:16 Cleverguy25

Đây có lẽ là lý do tại sao btw mà họ nói không ràng buộc với nguyên thủy trực tiếp ra khỏi phạm vi, hoặc nếu bạn không có một khoảng thời gian trong ràng buộc của bạn bạn đang làm sai :-) – Cleverguy25

Trong đoạn mã gốc của bạn, {{x}} không thuộc về <mydir>. Bạn nên định nghĩa một mẫu cho chỉ thị.

// js 
.directive('mydir', function() { 
    return { 
     template: '{{x}}', 
     scope: {}, 
     link: function(scope){ 
      scope.x = 5; 
     } 
    }; 
}); 

// html 
<body ng-init="x=10"> 
    <mydir></mydir> 
</body>

Đây là the preview

Nguồn

2016-01-23 11:23:01 stanleyxu2005

nếu nó không thuộc về chỉ thị, tại sao đầu ra 5, khi phạm vi: true –

Đó là điều kiện. Khi nó bị cô lập phạm vi, html bên trong không thuộc về chỉ thị. Bạn có thể đặt '{{$ id}}' bên trong và bên ngoài chỉ thị của bạn để kiểm tra id phạm vi. Nói cách khác, nếu bạn đặt 'ng-init =" x1 = 10 "'.'{{X}}' bên trong chỉ thị của bạn sẽ không hiển thị 5 nhưng chuỗi rỗng. Ừ. đây là một trường hợp thú vị. Nhưng thông thường chúng ta tạo ra một chỉ thị với mẫu. Nếu bạn nhúng mã vào chỉ thị, hãy xem xét tốt hơn 'transclude'. – stanleyxu2005

nội dung bên trong Chỉ thị với cô lập và không bị cô lập phạm vi

Trả lời

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