6

stara się znaleźć najlepszy sposób, aby obserwować zmiany atrybutów, które idealnie aktualizacji w oparciu o zdarzenia keypress zobowiązany do zakresu w kontrolerze dominującejkątowe niestandardowe

chciałbym każdego „instancję "dyrektywy, aby zmienić własność" hasFocus "poprzez aktualizację wartości atrybutu np.

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

szablon:

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

i tak tylko 1 dyrektywa może mieć wartość równą 'prawdziwy' w dowolnym momencie.

mam dyrektywy niestandardowej

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

}) 

ale cant wydają się wyodrębnić wartości od $ obserwować metoda spróbował wykorzystać $ zegarek, ale nadal nie działał nie wiem, co robię źle!

+0

używasz 'hasFocus: @' która trwa prawdziwa/false wartości jako łańcuchy. Musisz zdobyć je jako obiekty używając 'hasFocus:" = "' i 'has-focus =" true "' na HTML –

+0

Dzięki Omri - Thats świetnie - działało idealnie, tak, pomyliłeś się z opcjami zakresu izolatu! – SteveP124

Odpowiedz

1

jeśli użyć @ wiązania, możesz użyć $ oglądać tak:

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

jeśli to nie pomoże, lub jeśli wolisz wiązania z = dwukierunkowej:

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

i

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

}) 

myślę wiązania dwukierunkowe jest lepsza zwłaszcza logicznych b Jeśli potrzebujesz go tylko do kontrolowania wyglądu DOM, możesz nawet nie potrzebować oglądać zmian, wystarczy podłączyć $ scope.hasFocus do DOM gdzieś (ng-show, ng-switch, itp. .)

EDIT: Tak, właśnie zauważyłem szablon, więc jeśli używasz wiązania (= dwa kierunki) nie trzeba zegarek