Đóng gói chỉ thị tabular-ui và gặp phải các lỗi "Nhiều chỉ thị yêu cầu cho phạm vi chuyển đổi/cô lập phạm vi"

Question

Tôi đang cố gắng mở rộng chức năng tabular-ui và tôi đang gặp sự cố với việc gói nó.

plunker Đây là chỉ thị tabset un-bọc:

http://plnkr.co/edit/AhG3WVNxCal5fZOUbSu6?p=preview

plunker này chứa nỗ lực đầu tiên của tôi tại gói chỉ thị tabset:

http://plnkr.co/edit/naKXbeVOS8nizwDPUrkT?p=preview

Các gói cách tiếp cận ban đầu là thẳng - bao bì bên trong. Nhưng ... tôi giới thiệu các div phụ trong mẫu thay thế để tránh "Nhiều chỉ thị yêu cầu phạm vi bị cô lập" và "Nhiều chỉ thị yêu cầu chuyển đổi" các lỗi góc và để đảm bảo việc chuyển đổi xảy ra.

chính đoạn mã:

.directive('urlTabset', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    scope: { 
     tabManager: '=' 
    }, 
    controller: [ "$scope", function($scope) { 
     var tabManager = $scope.tabManager; 
    }], 
    template: 
     '<div>' + 
     '<tabset>' + 
      '<div ng-transclude>' + 
      '</div>' + 
     '</tabset>' + 
     '</div>' 
    }; 
}) 

.directive('urlTab', function() { 
    return { 
    require: '^urlTabset', 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    scope: { tabName: '@' }, 
    link: function(scope, element, attrs, urlTabsetCtrl) { 
    }, 
    template: 
     '<div>' + 
     '<tab>' + 
      '<div ng-transclude>' + 
      '</div>' +     
     '</tab>' + 
     '</div>' 
    }; 
}); 

Tuy nhiên, tôi nghĩ rằng divs thêm trong mẫu đang gây ra vấn đề. Đây là tập hợp chưa được mở với các div phụ ở những vị trí mà mẫu của tôi sẽ thêm chúng.

http://plnkr.co/edit/kjDs7xJcZqltCAqUSAmX?p=preview

Vì vậy, điều logic là để loại bỏ các divs ... nhưng đây là nơi tôi cần sự giúp đỡ. Có ai biết một cách sạch sẽ để làm điều này mà không cần nhấn "Nhiều chỉ thị yêu cầu cho phạm vi bị cô lập" và "Nhiều chỉ thị yêu cầu cho việc chuyển đổi" các lỗi góc. Đây là một lần thất bại.

http://plnkr.co/edit/0C6lFNhfdTVcF7ahuN3G?p=preview

Error: Multiple directives [urlTab, tab] asking for transclusion on: <tab class="ng-isolate-scope ng-scope"> 

BTW, trong trường hợp bạn đang tự hỏi những gì tôi đang cố gắng để làm, mục tiêu cuối cùng của tôi là sử dụng thuộc tính tabManager truyền cho urlTabset tự động cư trường trong chỉ thị tab (được bao bọc bởi urlTab). Để cụ thể hơn, đây là những gì tôi đang hướng tới:

.directive('urlTab', function() { 
    return { 
    require: '^urlTabset', 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    scope: { tabName: '@' }, 
    link: function(scope, element, attrs, urlTabsetCtrl) { 
     scope.tabs = urlTabsetCtrl.tabs; 
     scope.tabSelected = urlTabsetCtrl.tabSelected; 
    }, 
    template: 
     '<tab active="tabs[tabName].active" disabled="tabs[tabName].disabled" select="tabSelected(tabName)" ng-transclude>' + 
     '</tab>' 
    }; 
}); 

Mẫu ở trên rõ ràng không hoạt động, nhưng nó cung cấp cho bạn ý chính về những gì tôi đang cố gắng làm.

Và tôi đồng ý với giải pháp yêu cầu chỉ thị gói không có phạm vi bị cô lập. Tôi có thể giải quyết vấn đề này bằng cách lưu trữ trạng thái trong ngữ cảnh của trình điều khiển.

Answer 1

Nếu bạn đang cố gắng tăng thêm chức năng của angular-ui, bạn có thể nên thực hiện nó với chỉ thị thuộc tính hơn là các thành phần mới. Tôi có thể bị nhầm lẫn nhưng có vẻ như bạn không có ý định thay đổi cấu trúc chung của DOM khác ngoài việc thay thế chỉ thị của bạn bằng các chỉ thị của angular-ui. Ví dụ: sử dụng HTML

<tabset url-tabset> 
    <tab url-tab> 
     <tab-heading> 
      <i class="icon-list"></i> Details 
     </tab-heading> 
     Details content. 
    </tab> 
    <tab url-tab> 
     <tab-heading> 
      <i class="icon-thumbs-up"></i> Impact 
     </tab-heading> 
     Impact tab content. 
    </tab>      
</tabset> 

có nghĩa là bạn không còn cần phải thực hiện bất kỳ sự thay thế hoặc thay thế mẫu nào. Điều này sẽ tránh được vấn đề đó với nhau.

Điều này làm cho vấn đề phạm vi bị cô lập đối với các thuộc tính bạn muốn sử dụng để tăng thêm.Thay vì sử dụng điều này, bạn có thể sử dụng scope: true để lấy cùng một phạm vi được tách biệt là tab và tabset (mặc dù bạn không thể xác định ràng buộc tại đây) và bạn có thể nhận các thuộc tính như bạn sử dụng giá trị giới hạn bình thường bằng cách sử dụng $parse và attrs.

Chỉ thị của bạn (với chức năng từ người plunker thứ hai của bạn) sau đó kết thúc tìm kiếm một cái gì đó như thế này.

angular.module('plunker', ['ui.bootstrap']) 

.directive('urlTabset', function() { 
    return { 
    restrict: 'A', 
    require: 'tabset', // Confirm the directive is only being used on tabsets 
    controller: [ "$scope", "$attrs", function($scope, $attrs) { 
     var tabManagerGetter = $parse($attrs.tabManager); // '=' 
     this.getTabManager = function() { 
     return tabManagerGetter($scope); 
     }; 

     // fun stuff here 
    }] 
    }; 
}) 

.directive('urlTab', function() { 
    return { 
    require: ['tab', '^urlTabset'], 
    restrict: 'A', 
    link: function(scope, element, attrs, ctrls) { 
     var urlTabsetCtrl = ctrls[1]; 

     function getTabName() { 
     return attrs.tabName; // '@' 
     } 

     var tabManager = urlTabsetCtrl.getTabManager(); 

     // fun stuff here 
    } 
    }; 
});