angolare personalizzato valore di attributo cambiamento direttiva

Question

Lottando per trovare il modo migliore per guardare per le modifiche degli attributi, che idealmente aggiornamento sulla base di un evento keypress, legato al campo di applicazione del controller genitore

Vorrei ogni 'istanza 'della direttiva di avere la propria proprietà' hasFocus 'da modificare aggiornando il valore dell'attributo es.

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

modello:

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

e in modo che solo 1 direttiva può avere il valore uguale a 'vero' in qualsiasi momento.

Ho una direttiva personalizzato

.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); 
    }); 
    } 

}) 

ma cant sembra per estrarre il valore del $ osservare metodo provato ad utilizzare $ orologio, ma ancora non ha funzionato non sicuro di quello che sto facendo male!

Answer 1

se utilizzare il @ vincolante, potrebbe essere necessario usare orologio come questo $:

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

se questo non funziona, o se si preferisce vincolante con = due vie:

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

e

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

}) 

Penso di legame a doppio senso è meglio soprattutto con booleani b perché se hai solo bisogno di controllare come appare il DOM, potresti non aver nemmeno bisogno di guardare per una modifica, dovresti semplicemente inserire $ scope.hasFocus nel DOM da qualche parte (ng-show, ng-switch, ecc. .)

EDIT: sì, ho appena notato il modello, quindi se si utilizza vincolante (= a due vie) non è necessario l'orologio