2013-10-13 14 views
20

Tôi đang cố gắng để đạt được điều khiển của cha mẹ "hộp" chỉ thị đệ quy:Làm cách nào để truy cập bộ điều khiển chỉ thị của cha mẹ bằng cách yêu cầu nó theo cách đệ quy?

<body ng-app="main"> 

<!-- no nesting: parent is the just body --> 
<box></box> 

<script type="text/javascript"> 
angular.module('main', []) 
.directive('box', function() { 
    return { 
     restrict: 'E', 
     controller: function() { }, 
     require: '?^box', // find optional PARENT "box" directive 
     link: function(scope, iElement, iAttrs, controller) { 
      // controller should be undefined, as there is no parent box 
      alert('Controller found: ' + (controller !== undefined)); 
     } 
    }; 
}); 
</script> 
</body> 

tôi mong đợi biến điều khiển được undefined trong hàm liên kết, nhưng tôi nhận được bộ điều khiển của chỉ thị hộp thực tế .

Vì vậy, câu hỏi của tôi là ... làm thế nào để đạt được quyền truy cập vào bộ điều khiển PHỤ HUYNH trong trường hợp như thế này:

<box> 
    <box></box> 
</box> 

http://jsfiddle.net/gjv9g/1/

Trả lời

18

OK, tìm thấy nó ...

nếu bạn muốn có được giữ của bộ điều khiển của một yếu tố phụ huynh:

... 
link: function(scope, iElement, iAttrs, controller) { 
    // http://docs.angularjs.org/api/angular.element 
    // jQuery/jqLite Extras: 
    // 
    // controller(name) - retrieves the controller of the current element or its parent. 
    // By default retrieves controller associated with the ngController directive. 
    // If name is provided as camelCase directive name, then the controller for this 
    // directive will be retrieved (e.g. 'ngModel'). 
    var parentCtrl = iElement.parent().controller('box'); 
} 
... 

này trả về một trong hai bộ điều khiển của chỉ thị phụ huynh hoặc người, một mức độ cao hơn, điều khiển của chỉ thị mẹ của cha mẹ, Nếu bạn cần phải chắc chắn bạn sẽ có được một bộ điều khiển của cha mẹ TRỰC TIẾP, tôi thấy điều này (có thể có một giải pháp tốt hơn, tôi không biết):

... 
controller: function($scope, $element) { 
    // store the element in controller, we'll need it later 
    this.$element = $element; 
}, 
// works in both pre and post link functions 
link: function() { 
    var parentElement = $element.parent(); 
    var parentCtrl = parentElement.controller('box'); 

    var hasDirectBoxParent = parentCtrl && parentCtrl.$element[0] === parentElement[0]; 

} 
... 

Ví dụ 1:

<box id="a"> 
    <box id="b"></box> 
<box> 

Khi hàm liên kết được gọi trên "hộp a", parentCtrl là undefined trong cả hai trường hợp. Khi hàm liên kết được gọi trên "hộp b", parentCtrl là bộ điều khiển của "hộp a" trong cả hai trường hợp.

Ví dụ 2:

<box id="a"> 
    <div> 
     <box id="b"></box> 
    </div> 
<box> 

Khi chức năng liên kết được gọi vào "hộp một", parentCtrl là undefined trong cả hai trường hợp. Khi hàm liên kết được gọi trên "hộp b", parentCtrl vẫn là bộ điều khiển của "hộp a" trong cả hai trường hợp, nhưng hasDirectBoxParent là false, vì vậy bạn có thể phân biệt cha mẹ với một ông bà.

4

require tiêm bộ điều khiển từ yêu cầu (mẹ) chỉ vào chỉ thị hiện tại (từ tài liệu góc: "yêu cầu - Yêu cầu một chỉ thị khác và tiêm bộ điều khiển của nó làm đối số thứ tư cho hàm liên kết" http://docs.angularjs.org/guide/directive)

Vì vậy, có thể bạn đã là getti Bạn muốn gì? Tức là, bộ điều khiển cha mẹ được tiêm vào cho trẻ thông qua thông số controller của bạn.

+0

như bạn có thể thấy, không có hộp PHỤ HUYNH trong ví dụ ban đầu của tôi, vì vậy tôi mong đợi để có được 'undefined' như tham số thứ tư đến chức năng liên kết, không phải là bộ điều khiển của chính cá thể đó – maX

+0

Nhưng bạn đang khai báo một bộ điều khiển. Vì vậy, cha mẹ được điều khiển và trẻ em (nếu có tồn tại) kế thừa từ nó. Mục tiêu của bạn là biết liệu một chỉ thị cụ thể có phải là phụ huynh hay một đứa trẻ không? Nếu có lẽ bạn muốn xem phạm vi $ parent? – KayakDave

+1

Thực ra tôi không muốn sử dụng phạm vi trong trường hợp cụ thể này, vì phạm vi có thể trở nên phức tạp, đặc biệt nếu bạn cần sử dụng một phạm vi riêng biệt. Ngoài ra, thực hành tốt nhất là sử dụng các bộ điều khiển và 'yêu cầu' để liên lạc chỉ thị đến chỉ thị. Quan điểm của tôi là nó hoạt động như một sự quyến rũ khi bạn yêu cầu một chỉ thị cha mẹ với một tên khác, tại sao bạn không thể thực hiện điều này một cách đệ quy. – maX

39

Vì góc 1.3 bạn có thể sử dụng hai dấu trọng âm ^^ để tìm kiếm chỉ thị trong phần tử cha "chỉ".

Trích từ Angular Docs on require:

  • (no prefix) - Xác định vị trí điều khiển yêu cầu trên các yếu tố hiện tại. Ném lỗi nếu không tìm thấy.
  • ? - Cố gắng định vị bộ điều khiển được yêu cầu hoặc chuyển null vào liên kết fn nếu không tìm thấy.
  • ^ - Tìm bộ điều khiển yêu cầu bằng cách tìm kiếm phần tử và cha mẹ của nó. Ném lỗi nếu không tìm thấy.
  • ^^ - Tìm bộ điều khiển được yêu cầu bằng cách tìm kiếm cha mẹ của phần tử. Ném lỗi nếu không tìm thấy.
  • ?^ - Cố gắng định vị bộ điều khiển yêu cầu bằng cách tìm kiếm phần tử và cha mẹ của nó hoặc chuyển null vào liên kết fn nếu không tìm thấy.
  • ?^^ - Cố gắng tìm bộ điều khiển được yêu cầu bằng cách tìm kiếm cha mẹ của phần tử hoặc chuyển giá trị null cho liên kết fn nếu không tìm thấy.

Trong trường hợp của bạn, thay thế require: '?^box', với require: '?^^box',

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