2014-04-08 16 views
5

Tôi có các tình huống sau: Một chỉ transclude với phạm vi riêng biệt trong đó có một bộ điều khiển đính kèm trong nó:Tiếp cận thị từ yếu tố nhúng

angular.module('app', []) 
.directive('hello', function() { 

    return { 

    controller: function($scope) { 
     $scope.hello = "Hello World"; 
    }, 

    restrict: 'E', 
    replace: true, 
    transclude: true, 
    template: '<div class="hello" ng-transclude></div>', 
    scope: {} 
    }; 

}); 

Tôi đang mong chờ để truy cập điều khiển của chỉ thị từ các yếu tố nhúng :

<hello> 
    <h1>Hello Directive</h1> 

    <p>{{ hello }}</p> 
</hello> 

Tuy nhiên, điều này dường như không thể thực hiện được. Tôi đã thử truy cập hello với $parent$$nextSibling.

Có giải pháp nào cho trường hợp này không? Tôi không thể đặt bộ điều khiển trong trình bao bọc xung quanh trường hợp chỉ thị.

Tôi tạo ra một codepen để chứng minh hành vi này: http://codepen.io/jviotti/pen/ktpbE?editors=101

Trả lời

2

Bạn cần phải vượt qua biến thành các chỉ chào như một ràng buộc, và cũng có thể bao gồm nó như một phần của phạm vi cô lập: http://codepen.io/anon/pen/yoCkp

biết thêm thông tin ở đây: Confused about Angularjs transcluded and isolate scopes & bindings

Edit:

trong ví dụ ban đầu, mẫu dự kiến ​​sẽ biến {{}} chào trong phạm vi gốc cha mẹ, bu Nó thực sự nằm trong phạm vi chỉ thị hello. Trong thực tế, phạm vi phân lập rỗng trong chỉ thị có nghĩa là nó sẽ không nhận được bất kỳ biến phạm vi nào từ cha mẹ của nó. Vì vậy, những thay đổi ở trên là định tuyến biến (hello) không tồn tại từ phạm vi gốc vào chỉ thị, và sau đó đặt giá trị.

Để minh họa thêm điều này, bạn có thể xem xét điều này: http://codepen.io/anon/pen/pJEqjq - bạn sẽ thấy rằng bộ điều khiển đang đặt $rootScope.hello và nó cũng hoạt động. Mặc dù điều này không được khuyến cáo vì việc dựa vào các biến rootScope trên các bộ điều khiển khác nhau có thể bị lộn xộn.

+0

Trong ví dụ không làm việc, khuôn mẫu mong đợi biến {{hello}} nằm trong phạm vi gốc cha mẹ, nhưng nó thực sự nằm trong phạm vi chỉ thị hello. – goldins

+0

Bài viết tại https://www.airpair.com/angularjs/posts/transclusion-template-scope-in-angular-directives đã giúp tôi hiểu tại sao nó hoạt động theo cách này. – sven

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