Làm thế nào để ui-sref góc ui-router hoạt động khi bên trong mẫu của chỉ thị?

Question

Về cơ bản, tôi đang cố gắng thay đổi/tùy chỉnh hành vi của ui.bootstrap.accordion. Tất cả đều hoạt động, ngoại trừ tích hợp với ui-router.
Dưới đây là cách tôi muốn sử dụng accordion:

<accordion> <!-- this element is actually separate view in a parent state of the accordion-group's below.--> 
    <accordion-group ui-sref="site.home.newsID_1"> <!-- accordion-groups will be generated with ng-repeat.--> 
     <accordion-heading> 
     News 1 
     </accordion-heading> 
     <p>This is</p> 
    </accordion-group> 
    <accordion-group ui-sref="site.home.newsID_2"> 
     <accordion-heading> 
     News 2 
     </accordion-heading> 
     <p>Home News's</p> 
    </accordion-group> 
    <accordion-group ui-sref="site.home.news.newsID_3"> 
     <accordion-heading> 
     News 3 
     </accordion-heading> 
     <p>Preview and navigation</p> 
    </accordion-group> 
    </accordion> 

Dưới đây là mẫu sửa đổi của accordion:

<div ng-mouseenter="isOpen = !isOpen" ng-mouseleave="isOpen = !isOpen"> 
    <div class="accordion-group" ng-class="{transparentBackground: isClicked}"> 

     <div class="accordion-heading"> 
     <a id="link" ui-sref="site" class="accordion-toggle" ng-click="isClicked = !isClicked" accordion-transclude="heading"> 
      {{heading}} 
     </a> 
     </div> 

    <div class="accordion-body" collapse="!isOpen && !isClicked"> 
     <div class="accordion-inner" ng-transclude></div> </div> 
    </div> 
</div> 

Về cơ bản các 'site.home.newsID_X' cần phải thay thế 'trang web' giá trị của ui-sref trong khuôn mẫu.
nỗ lực của tôi là để thiết lập giá trị của thuộc tính ui-sref qua 'tố' tham số từ chức năng liên kết các chỉ thị accordionGroup của như hình dưới đây:

link: function(scope, element, attrs, accordionCtrl) { 
    element.find('#link').attr("ui-sref", attrs.uiSref) 
    [...] 
} 

này không cập nhật các mục tiêu ui-sref, nhưng ui- router không tạo ra href tương ứng từ url tình trạng tham chiếu, vì vậy sau khi DOM được render tôi nhận

<a ui-sref="site.home.newsID_1" href="#/site"></a> 

thay vì dự kiến ​​

<a ui-sref="site.home.newsID_1" href="#/site/home/newsID_1"></a> 

Tôi đang thiếu gì?
Tôi đánh giá cao thời gian của bạn,
Jared

Answer 1

Ok, tôi đã giải quyết được sự cố của mình. Có vẻ như tôi đã nhầm lẫn các tiểu bang với các url.
Liên kết với ui-sref sẽ kích hoạt trạng thái thay đổi thành trạng thái cụ thể và sẽ tùy ý thay đổi/tạo url, nếu một được xác định trong trạng thái. Cũng nói rằng bản thân họ không có tham số, nhưng các url thì có.
Đây là sự hiểu biết của tôi về trạng thái:
Trạng thái trong ui-router đề cập đến trạng thái của trang web được xác định trong mẫu html đã cho. Mẫu này có thể đã xác định các giao diện ui, tức là các trình giữ chỗ (có thể được đặt tên) sẽ được điền bởi các trạng thái khác. Bất kỳ trạng thái nào cũng có thể nhắm mục tiêu một hoặc nhiều giao diện ui trong mẫu của các tiểu bang khác với các mẫu html tương ứng - tức là chúng có thể đặt nội dung của các mẫu đó vào dạng xem ui của các mẫu của các tiểu bang khác. Mỗi tiểu bang có thể có một url liên kết, liên kết url trong trình duyệt với trạng thái. Nếu url trong trình duyệt khớp với url được liên kết với một trạng thái cụ thể, trạng thái của trang web sẽ thay đổi, tức là trạng thái mới sẽ điền các giao diện ui tham chiếu trong các mẫu của tiểu bang khác, với nội dung của các mẫu được liên kết với các chế độ xem ở trạng thái hiện hoạt .
Url theo phân cấp của các tiểu bang, nhưng độc lập với chúng, vì vậy, trạng thái 'site.home' có thể có url của '/ home/content', url này sẽ được nối vào url được liên kết với trạng thái gốc ('site') , trừ khi được bảo là không được.
Do đó, thay đổi trạng thái/chuyển đổi có thể được kích hoạt bởi ui-sref hoặc bằng cách thay đổi liên kết url qua href hoặc thủ công trong trình duyệt của người dùng.
Một cách khác để kích hoạt thay đổi trạng thái nội bộ (ví dụ: trong một bộ điều khiển cũng có thể được định nghĩa cho mọi trạng thái) là sử dụng phương thức $ state.go (...).
Hiểu điều đó, tôi chỉ cần thay đổi tham chiếu ui-sref thành url href. Mặc dù đây không phải là giải pháp trực tiếp cho vấn đề của tôi và tôi vẫn không hiểu tại sao ui-router không tạo ra các href tương ứng, nó làm cho mọi thứ hoạt động như mong đợi. Tôi vẫn đang khám phá việc sử dụng $ state.go() để hoàn thành mục tiêu của mình.

Answer 2

Tôi không chắc nó có mới hay không, nhưng có cách để chuyển các tham số khi sử dụng ui-sref. Trong trường hợp của bạn nó sẽ là một cái gì đó như thế này:

ui-sref="site.home.news({ newsID: news.id })" 

(cho một nhà nước site.home.news trong bạn ứng dụng, với một tham số newsID trong URL tương ứng của nó, và xem xét news.id điểm để ID tin tức trong hiện tại $scope)

Xem tài liệu here.