努力寻找观察属性变化的最佳方式,理想情况是基于keypress事件更新,绑定到父控制器的范围
我希望指令的每个'实例'都有自己的'hasFocus'属性,可以通过更新属性值来改变它
<menu has-focus="{{ true }}" ></menu>
<menu has-focus="{{ false }}" ></menu>
<menu has-focus="{{ false }}" ></menu>
Run Code Online (Sandbox Code Playgroud)
模板:
<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>
Run Code Online (Sandbox Code Playgroud)
因此,任何时候只有1个指令的值可以等于'true'.
我有一个自定义指令
.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);
});
}
})
Run Code Online (Sandbox Code Playgroud)
但似乎无法从使用$ watch尝试的$ observe方法中提取值,但仍然无法确定我做错了什么!