Helpex - Trao đổi & giúp đỡ Đăng nhập
7

Tôi đang sử dụng Bộ định tuyến AngularUI và tôi đang cố gắng có các liên kết lồng nhau / con.

Tất cả đều hoạt động tốt nhưng làm cách nào để tôi có liên kết đã chọn / đang hoạt động trong tab Liên hệ?

Về cơ bản, tôi cần có liên kết được chọn / đang hoạt động trên một liên kết khi trang Liên hệ được tải. Hiện tại nó không đọc vì một số lý do controlleroneCtrltrừ khi tôi nhấp vào liên kết liên hệ một.

angular
    .module ('myApp', ['ui.router'
  ])
    .config (['$urlRouterProvider', '$stateProvider',  function ($urlRouterProvider, $stateProvider) {
        $urlRouterProvider.otherwise ('/summary');

        $stateProvider.
            state ('summary', {
            url: '/summary',
            templateUrl: 'summary.html',
            controller: 'summaryCtrl'
          }).
            state ('about', {
            url: '/about',
            templateUrl: 'about.html',
            controller: 'aboutCtrl'
          }).
            state ('contact', {
            url: '/contact',
            templateUrl: 'contact.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.one',{
            url: '/contact.contactone',
            templateUrl: 'one.html',
            controller: 'contactoneCtrl'
          })
            // Sub page
            .state('contact.two',{
            url: '/contact.contacttwo',
            templateUrl: 'two.html',
            controller: 'contacttwoCtrl'
          });

      }]);

Plunker: http://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview

7 hữu ích 3 bình luận 12k xem chia sẻ
10

Có một cách nhanh hơn nhiều để làm điều này. Chỉ cần sử dụng ui-sref-active="active"thuộc tính thay vì ui-sref.

Một ví dụ:

<ul>
    <li ui-sref-active="active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>

Khi trạng thái đang hoạt động, mục danh sách sẽ kích hoạt lớp. Nếu bạn muốn một lớp khác cho các trạng thái đang hoạt động hoặc nhiều hơn một lớp, chỉ cần thêm nó như sau

<ul>
    <li ui-sref-active="active so-active super-active">
        <a ui-sref="state">State 1</a>
    <li>
<ul>
10 hữu ích 0 bình luận chia sẻ
5

Tôi sử dụng mô hình hiển thị statetrên phạm vi gốc và sử dụng state.current.nametrong các mẫu. Tôi biện minh cho sự xuất hiện toàn cầu này vì đó là mối quan tâm ở cấp ứng dụng. Nếu chỉ thị điều hướng của bạn có phạm vi cô lập, bạn sẽ cần phải chuyển nó vào, nhưng điều đó không có vấn đề gì.

Tôi nghĩ trong thực tế, điều đó rất tốt cho chúng tôi.

Trông như thế này:

javascript

app = angular.module ('myApp', ['ui.router']);
app.controller('MainController', function($scope, $state){
  $scope.state = $state;
});

html:

<nav>
  <ul>
    <li ng-repeat="tab in tabs" ng-class="{active: state.current.name === tab.id}>{{tab.name}}</li>
  </ul>
</nav>
5 hữu ích 2 bình luận chia sẻ
1

đây là plunk được cập nhật - http://plnkr.co/edit/UjjNm4JJIsjb4ydWZRDi?p=preview

Những thay đổi

  1. đã thêm một bộ điều khiển mới contactCtrl

  2. thiết lập $state.go('contact.contactone');bên trongcontactCtrl

  3. được cập nhật app.jsđể /contacttrỏ đếncontactCtrl

1 hữu ích 1 bình luận chia sẻ
1

Tôi đang sử dụng ng-classnhư thế này:

ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"

"state"Tên tôi có cấu trúc như sau:

app
app.homepage
app.profile
app.profile.user
.etc

Ví dụ: trong trang chủ của tôi, nút của nó trở thành như thế này:

<li ng-class="{active: state.current.name.split('.')[1] === 'homepage'}"><a ui-sref="app.homepage">Home</a></li>

Vì vậy, chỉ cần xác định phạm vi $statenhư @Simple As Could Be đã nói ở gốc của bộ điều khiển ứng dụng và bạn có thể sử dụng ng-classbất kỳ trạng thái nào của ứng dụng và độ sâu của trạng thái ứng dụng của bạn.

1 hữu ích 0 bình luận chia sẻ
0

Xem bài viết của tôi http://embed.plnkr.co/bRfl1S9KXQuvL0Bvt9jD/preview .

Ngoài ra, hãy thử cập nhật phiên bản ui-router lên 0.2.12.

Chỉ có tab khách hàng khi thực sự được triển khai.

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ angularjs angular-ui-router , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading