问题
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
回答1:
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>
来源：https://stackoverflow.com/questions/21171502/angular-directive-with-ng-attr-bound-to-model