Struggling to figure out the most efficient way to monitor attribute changes, preferably triggered by a keypress event and linked to the scope in the parent controller
I want each individual instance of the directive to have its own 'hasFocus' property that can be modified by updating the attribute value e.g.
<menu has-focus="{{ true }}" ></menu>
<menu has-focus="{{ false }}" ></menu>
<menu has-focus="{{ false }}" ></menu>
template:
<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>
and therefore, only one directive should have the attribute value set to 'true' at any given moment.
I've created a custom directive
.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);
});
}
})
but I'm having trouble extracting the value from the $observe method I tried using $watch but it didn't work either. Not sure what I'm missing!