角度カスタムディレクティブ変化属性値

Question

'属性値を更新することによって、自身の' hasFocus 'プロパティを変更する指示文の例

<menu has-focus="{{ true }}" ></menu> 
<menu has-focus="{{ false }}" ></menu> 
<menu has-focus="{{ false }}" ></menu> 

テンプレート：

<div class="menu"> 
<ul> 
    <li ng-repeat="option in menu.options" ng-class="{ 'focused' : hasFocus }" tabindex="{{ $index }}"> 
     <div class="icon">{{ $index+1 }}</div> 
    </li> 
</ul> 

ので、唯一の1つのディレクティブは、いずれかの時点で '真' に等しい値を持つことができます。

私はカスタムディレクティブ

.directive('menu', function() 
{ 
    restrict : 'E', 
    templateUrl : 'partials/menu-left.html', 
    replace : true, 
    scope : { 
     hasFocus : '@' 
    }, 
    link : function($scope, element, attrs) 
    { 
    attrs.$observe('hasFocus', function(value) { 
     console.log(value); 
    }); 
    } 

}) 

を持っていますが、$観察方法 から値を抽出するように見えるカントは、私が間違っているのかわから はない$ウォッチを使用してみましたが、それでもdidntの仕事！

Answer 1

あなたが結合@を使用している場合、あなたは$のように見て使用する必要があります：問題が解決しない場合、またはあなたが=との結合の双方向を好む場合

$scope.$watch(function(){ 
    return attrs.hasFocus; 
}, function(val) { 
    $scope.hasFocus = val; 
}); 

：

<menu has-focus="true" ></menu> 

私は双方向の結合が特にブール値bに優れていると思い

と

.directive('menu', function() 
{ 
    restrict : 'E', 
    templateUrl : 'partials/menu-left.html', 
    replace : true, 
    scope : { 
     hasFocus : '=' 
    }, 
    link : function($scope, element, attrs) 
    { 
    // $scope.hasFocus holds true/false 
    } 

}) 

あなたがDOMの見た目を制御する必要があるだけであれば、変更を監視する必要はないかもしれませんが、DOM scope（ng-show、ng-switchなど）に$ scope.hasFocusを接続するだけです。 。）

EDIT：あなたは（=を結合双方向）を使用する場合は、あなたが `hasFocusを使用している