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

1

我刚刚将你所有的代码放到了一个 jsFiddle 中（如果你下次这样做会很有帮助），一切似乎都正常：http: //jsfiddle.net/rtCP3/110/

这是应该处于活动状态的 li 的输出：

<li ng-class="{active: isActive('programs')}" class="active">
    <a href="#/programs">Programs</a>
</li>
于 2013-05-17T11:29:57.197 回答