Geek Answers Handbook

Angular with ng-attr model-bound

All code and preview in plunker

I want to bind the attribute to the scope of the directive twice and change this attribute from the 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 is here:

Error: [$parse:syntax] Syntax Error: Token 'pane.a' is unexpected, expecting [:] at column 3 of the expression [{{pane.a}}] starting at [pane.a}}].

If you do not use the expression inside attirbute, everything works as expected:

        <pane ng-attr-hidden="{{pane.a}}">A</pane>

Edit:

This example works as expected: preview in plunker

+4
source share
1 answer

I assume that ng-attr-hiddenan angular expression expects, but you give it an object definition.
Try to remove{{}}

<pane ng-attr-hidden="pane.a">A</pane>
+7
source

More articles:


All Articles