角度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

回答

相關問題