角度js指令 - 如何评估指令模板的角度标签html

我有一个指令，他们的行为我想用属性来控制。这是应该应视属性角度js指令 - 如何评估指令模板的角度标签html

<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属性的值。

来源

2013-05-17 Michael Elias

我刚把所有的代码放到一个的jsfiddle（这将会是有益的，如果你没有下一次），一切似乎工作：http://jsfiddle.net/rtCP3/110/

这里是李应该是主动的输出：

<li ng-class="{active: isActive('programs')}" class="active"> 
    <a href="#/programs">Programs</a> 
</li>

来源

2013-05-17 11:29:57

jsFiddle的确的工作。我还应该提到，我在一个由ng-view加载的部分html中使用了这个指令。我会尝试修改jsFiddle来模仿设置 –

我想清楚发生了什么事。该指令的控制器的作用域继承自已具有isActive方法的父作用域。重命名指令范围中定义的方法后，所有方法都按预期工作。我宁愿没有该指令的作用域继承父级的作用域。指令文档指的是'隔离'范围，这听起来像是我应该在这种情况下使用的东西。 –

角度js指令 - 如何评估指令模板的角度标签html

回答

相关问题