javascript - 观察 AngularJS 指令中函数的值

Question

有没有办法观察 AngularJS 指令中函数表达式的值变化？我有以下 HTML 和 JavaScript，模板中 {{editable()}} 的插值显示该值计算为 true，而检查 Chrome 中的 HTML 元素显示 contenteditable 是假的。

关于如何观察此函数的值变化并相应地更新元素 attr 有什么建议吗？或者有更好的方法来实现这一目标吗？ (我仍然想评估该函数。)

HTML:

<h4 editable="account.hasRole('ROLE_ADMIN')" content="doc.heading"></h4>

Javascript:

mod
    .directive(
            'editable',
            function() {
                return {
                    restrict : 'A',
                    template : '<button class="btn pull-right"><i class="icon-pencil"></i></button>{{content}} ({{editable()}})',
                    scope : {
                        'content' : '=',
                        'editable' : '&'
                    },
                    link : function(scope, element, attrs) {
                        scope.$watch('editable', function(newValue) {
                            element.attr('contenteditable', newValue());
                        });
                    }
                };
            });

Answer 1

尝试将 watch 放在'editable()'上而不是'editable'

说明:需要这样做的原因是因为 '&' 指向属性表达式的动态生成的函数包装器，而不是表达式本身。这个特殊的包装函数返回 account.hasRole('ROLE_ADMIN') 的值。