home.html

<h1>Hello {{ $ctrl.name }}!</h1>
<p>
  Actions:

  <button class="button" ng-click="$ctrl.getUsers()"> Find Users!</button>
  <button class="button" ng-click="$ctrl.selectedId = null;" ng-disabled="!$ctrl.selectedId">Unselect</button>
</p>
<div class="list-container">
  <section class="ng1">
    <h2 class="vue-heading">
      AngularJS (control)
    </h2>
    <user-item
      ng-if="$ctrl.selectedUser"
      user="$ctrl.selectedUser"
      selected
      unselectable
    ></user-item>
    <ul>
      <li ng-repeat="user in $ctrl.users">
        <user-item
          user="user"
          selected="user.id === $ctrl.selectedId"
          ng-on-select_me="$ctrl.onSelect($event)"
        ></user-item>
      </li>
    </ul>
  </section>
  <section class="vue">
    <h2 style="border-left: 4px solid var(--c-vue); padding-left: 8px;">
      Wrapped Vue Component
    </h2>
    <!-- <p ng-if="$ctrl.selectedUser">
      {{$ctrl.selectedUser.name}}
    </p> -->
    <v-user-item
      ng-if="$ctrl.selectedUser"
      ng-prop-user="$ctrl.selectedUser"
      selected
      unselectable
    ></v-user-item>
    <ul>
      <li ng-repeat="user in $ctrl.users">
        <v-user-item
          ng-prop-user="user"
          ng-prop-selected="user.id === $ctrl.selectedId"
          ng-on-select_me="$ctrl.onSelect($event)"
        ></v-user-item>
      </li>
    </ul>
  </section>
  <v-user-list
    style="grid-area: 2 / span 2;"
    ng-prop-heading_text="'Vue Component using DI'"
    ng-prop-a_boolean="true"
    ng-prop-a_number="1"
    ng-prop-users="$ctrl.users"
  ></v-user-list>
  <v-prop-tester
    ng-prop-title="$ctrl.testProps.title"
    ng-prop-likes="$ctrl.testProps.likes"
    ng-prop-is_published="$ctrl.testProps.is_published"
    ng-prop-comment_ids="$ctrl.testProps.comment_ids"
    ng-prop-author="$ctrl.testProps.author"
    ng-prop-callback="$ctrl.testProps.callback"
    ng-prop-promise="$ctrl.testProps.promise"
  ></v-prop-tester>
</div>