ng-attr 绑定到模型的 Angular 指令 [英] Angular directive with ng-attr bound to model
问题描述
我想将一个属性双重绑定到指令范围并从外部更改该属性它改变了指令内部的一些东西.
<div class="btn-group"><button type="button" class="btn btn-primary" ng-model="pane.a" btn-checkbox>A</button><button type="button" class="btn btn-primary" ng-model="pane.b" btn-checkbox>B</button><button type="button" class="btn btn-primary" ng-model="pane.c" btn-checkbox>C</button><button type="button" class="btn btn-primary" ng-model="pane.d" btn-checkbox>D</button>可见:{{pane.a}} {{pane.b}} {{pane.c}} {{pane.d}}<窗格容器><pane ng-attr-hidden="{{pane.a}}">A</pane><pane>B</pane><窗格>C</窗格><窗格>D</窗格></窗格容器>
这里的错误是:
错误:[$parse:syntax] 语法错误:标记 'pane.a' 是意外的，期望 [:] 位于表达式 [{{pane.a}}] 的第 3 列，从 [pane.a] 开始.一种}}].如果不在属性中使用表达式，则一切正常:
<pane ng-attr-hidden="{{pane.a}}">A</pane>此示例按预期工作:在 plunker 中预览
我假设 ng-attr-hidden 需要一个角度表达式，但您给它一个对象定义.
尝试删除 {{}}
<pane ng-attr-hidden="pane.a">A</pane>All code and preview in plunker
I want to double-bind an attribute to directive scope and changing that attribute from outside it changes something inside the directive.
<body ng-app="paneApp" ng-controller="AppCtrl">
<div class="btn-group">
<button type="button" class="btn btn-primary" ng-model="pane.a" btn-checkbox>A</button>
<button type="button" class="btn btn-primary" ng-model="pane.b" btn-checkbox>B</button>
<button type="button" class="btn btn-primary" ng-model="pane.c" btn-checkbox>C</button>
<button type="button" class="btn btn-primary" ng-model="pane.d" btn-checkbox>D</button>
</div>
Visible: {{pane.a}} {{pane.b}} {{pane.c}} {{pane.d}}
<pane-container>
<pane ng-attr-hidden="{{pane.a}}">A</pane>
<pane>B</pane>
<pane>C</pane>
<pane>D</pane>
</pane-container>
</body>
The error here is:
Error: [$parse:syntax] Syntax Error: Token 'pane.a' is unexpected, expecting [:] at column 3 of the expression [{{pane.a}}] starting at [pane.a}}].
If not using an expression inside the attirbute, all works as expected:
<pane ng-attr-hidden="{{pane.a}}">A</pane>
Edit:
This example is working as expected: preview in plunker
I'm assuming ng-attr-hidden expects an angular expression, but you're giving it an object definition.
Try removing the {{}}
<pane ng-attr-hidden="pane.a">A</pane>
这篇关于ng-attr 绑定到模型的 Angular 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
