javascript - 将更新绑定(bind)到链接内的指令元素，而不是内联

Question

我正在创建一个选项卡集指令。

为了更新 ARIA 属性，并使 ENTER 按钮的选项卡驱动成为可能，使用箭头按钮和其他可访问性黑魔法之间移动，以及清理指令模板上的标记，我(认为)我想要在链接函数中进行一些元素的双向绑定(bind)，而不是将这些内容内联到元素上。

即代替<li aria-selected={{active}}/>Text</li>

我想在链接中重现该绑定(bind)，以便以编程方式提供更多控制和更清晰的 <li>模板中的元素。

但是，element.attr('key',value) 似乎不会自动执行此操作，而仅在初始状态下执行此操作。这或多或少是有意义的，因为双向绑定(bind)基于元素上的 {{}}。

我需要做$watch吗？或者是其他东西？或者有更简洁的方法吗？或者这只是一个坏主意，完全是由于 $watches 的开销或其他原因？

因此，在加载时，这工作正常，但显然，不会随着值的变化而更新:

element.attr({
    'role': 'tab',
    'aria-controls': scope.tab.id,
    'id': 'tabFor' + scope.tab.id,
    'class':'tab'
    'aria-selected': !!scope.tab.active,
    'tabindex': scope.tab.active ? 0 : -1,
    'class': scope.tab.active ? 'tab active' : 'tab'
});

我希望能够在链接函数中以编程方式更新这些内容，以清理模板并为我提供更多细节方面的灵 active 。

这样模板就可以是这样的:

<li tab-tab ng-repeat = "tab in tabsetCtrl.tabs>
        <span>{{tab.heading}}</span>
</li>

而不是这个:

<li tab-tab ng-repeat = "tab in tabsetCtrl.tabs" ng-click = "tabsetCtrl.select(tab)" aria-controls = "{{tab.id}}" aria-selected = "{{tab.active?'true':'false'}}" tabindex = "{{tab.active?'0':'-1'}}"  ng-class = "{'active': tab.active}">
        <span>{{tab.heading}}</span>
</li>

Answer 1

谢谢，@amy-blankenship

我添加了 watch 。

// on load, the initial values are applied 

element.attr({
            'role': 'tab',
            'aria-controls': scope.tab.id,
            'id': 'tabFor' + scope.tab.id,
            'aria-selected': !!scope.tab.active,
            'tabindex': scope.tab.active ? 0 : -1,
            'class': scope.tab.active ? 'tab active' : 'tab'
        });


// On change to the active tab, new values are applied.

        scope.$watch("tab.active",function(){
            element.attr({
                'aria-selected': !!scope.tab.active,
                'tabindex': scope.tab.active ? 0 : -1,
                'class': scope.tab.active ? 'tab active' : 'tab'
            });
        });

这就解决了。