0

属性を使用して動作を制御したいディレクティブがあります。属性の値に応じてアクティブなアイテムを持つべきナビゲーションバーです

<navbar active="programs"></navbar>

ディレクティブのテンプレート

<div class="navbar span12">
<div class="navbar-inner">
    <div class="container-fluid">
        <a class="brand" href="#">Loopz</a>
        <ul class="nav">
            <li ng-class="{active: isActive('programs')}"><a href="#/programs">Programs</a></li>
            <li ng-class="{active: isActive('shop')}"><a href="#/shop">Shop</a></li>
            <li ng-class="{active: isActive('profile')}"><a href="#/profile">Profile</a></li>
        </ul>
    </div>
</div>

activeクラスは、一致するactive属性値を持つ要素に配置する必要があります。activeテンプレートを評価する必要があり、ディレクティブの内部スコープには、属性の値とディレクティブのスコープ メソッドに渡される値を一致させる関数が必要です。isActive(value)

ディレクティブ

directivesModule.directive('navbar', function(){
    return {
        restrict: "E",
        templateUrl: "partials/navbar.html",
        replace: true,
        controller: function($scope, $element, $attrs){
            $scope.isActive = function(value){
                return $attrs.active === value;
            }
        }
    }
});

isActive関数は正しい値で呼び出されていますが、オブジェクトには属性の値$attrsが含まれていません。active

4

1 に答える 1