Angular JS: lớp "active" trên các mục menu được tạo bởi bộ điều khiển

Question

Tôi đang sử dụng dịch vụ JSON để liệt kê các mục menu (liên kết). Khi điều hướng các tuyến/trang khác nhau, tôi muốn một lớp "hoạt động" được thêm vào liên kết hiện đang hoạt động (tức là trang mà người dùng đang bật).

Tôi đã sử dụng jsfiddle này như là một điểm khởi đầu:http://jsfiddle.net/p3ZMR/4/

Tôi cũng đã tìm thấy vài câu trả lời ở đây trên stackoverflow, nhưng tất cả chúng đều tương tự như giải pháp trên.

Nhưng, giải pháp mà không hoạt động nếu các liên kết được tạo ra thông qua ng-repeat:

<ul class="main-menu"> 
    <li ng-repeat="page in pages"> 
     <a href="/#/{{page.id}}" active-link="active">{{page.name}}</a> 
    </li> 
    </ul> 

Dường như nếu chỉ được gọi trước khi bộ điều khiển thêm các liên kết.

Có cách nào để giải quyết vấn đề này không?

Answer 1

Khái niệm lập trình chủ yếu là tách mối quan tâm. Cá nhân tôi không thích giữ logic hoặc so sánh trong quan điểm của tôi. Tôi muốn giữ logic kinh doanh và so sánh trong javascript

HTML

<ul class="main-menu"> 
    <li ng-repeat="page in pages"> 
     <a ng-click="menu(page)" ng-class="{ active: isActive(page.url)>{{page.name}}</a> 
    </li> 
</ul> 

Javascript

angular.module('link', []) 

function myController($scope, $location){ 
    $scope.links = [ 
    { url: "one", name: "One"}, 
    { url: "two", name: "Two"}, 
    { url: "", name: "Three"} 
    ]; 

    $scope.isActive = function (viewLocation) { 
     var pattern = '/' + viewLocation, 
      re = new RegExp(pattern); 
     return re.test($location.path()); 
    }; 

    $scope.menu = function (location) { 
     $location.path('/' + location.location); 
    }; 
} 

Answer 2

Ng-class được thực hiện cho việc này. Kiểm tra các ý kiến ​​trên trang tài liệu góc cho ng-class như không tài liệu của nó.

Answer 3

HTML cho lặp đi lặp lại liên kết

<div ng-app="link"> 
    <div data-ng-controller="myController"> 
     <a href="#/{{ link.url }}" data-ng-repeat="link in links" data-ng-class="(link.url == location.path() && 'active')"> 
      {{ link.name }} 
     </a> 
    </div> 
</div> 

Javascript

angular.module('link', []) 

function myController($scope, $location){ 
    $scope.location = $location; 
    $scope.links = [ 
     { url: "one", name: "One"}, 
     { url: "two", name: "Two"}, 
     { url: "", name: "Three"} 
    ]; 
} 

này sẽ tạo ra các liên kết một/hai/ba với ba được đánh dấu bằng các màu đỏ. Dưới đây là một jsfiddle: http://jsfiddle.net/4mFYy/1/

Answer 4

Là tác giả của điểm xuất phát của bạn, tôi đã cập nhật fiddle, vì vậy nó sẽ hoạt động ngay bây giờ cho url động của bạn :).

angular.module('link', []). 
    directive('activeLink', ['$location', function(location) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs, controller) { 
      var clazz = attrs.activeLink; 
      scope.location = location; 
      scope.$watch('location.path()', function(newPath) { 
       if (attrs.href.substring(1) === newPath) { //<------ Here it is already interpolated 
       element.addClass(clazz); 
       } else { 
       element.removeClass(clazz); 
       } 
      }); 
     } 

    }; 

    }]). 
    controller('MyCtrl', ['$scope', function(scope) { 
    scope.pages=[ 
     { url: "one", name: "One"}, 
     { url: "two", name: "Two"}, 
     { url: "three", name: "Three"}, 
     { url: "", name: "home"} 
    ]; 
    }]); 

http://jsfiddle.net/p3ZMR/59/

Vấn đề là, rằng chỉ là cách đọc to các thuộc tính href, trước khi nó được nội suy. Tôi chỉ thay đổi nó theo một cách, rằng href sẽ được đọc ra, sau khi nó được nội suy.