在AngularJS指令中查看函数的值

Question

有没有办法在AngularJS指令中观察函数表达式更改的值？我有以下HTML和Javascript,并且{{editable()}}模板中的插值显示值的计算结果为true,而检查Chrome中的HTML元素则显示contenteditable为false.

关于如何观察此函数的值的任何建议都会改变,并相应地更新元素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

尝试将手表放在上面'editable()'而不是'editable'

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

Answer 2

我也更喜欢做那样的事情:

scope.$watch(function () {
  return scope.editable();
}, function (val) {
   // ...
});