What is the scope of the controller?

1

I am using the the tabbed template and I have the following form inside a tab

<ion-view view-title="Share Tips">
  <ion-nav-buttons side="secondary">
    <button class="button" ng-click="addTip()">Submit</button>
  </ion-nav-buttons>

  <ion-content>
    <form ng-submit="addTip()">
      <div class="list">
        <label class="item item-input item-stacked-label">
          <textarea ng-model="xDescription" placeholder="bla bla"></textarea>
        </label>
      </div>

      <input class="button button-balanced padding" type="submit" id="submit" value="Submit" />
    </form>
  </ion-content>
</ion-view>

Clicking on the Submit button inside the form (at the bottom) saves the text in xDescription properly. However the button in the nav header does not work because the value of xDescription is undefined.

This is what is in my app.js

  .state('tab.add', {
    url: '/add',
    views: {
      'tab-add': {
        templateUrl: 'templates/tab-add.html',
        controller: 'AddTipCtrl'
      }
    }
  })

Can someone clarify what the scope of AddTipCtrl covers? Everything inside ?

2

You can simply change your code of the template to that:

<ion-nav-buttons side="secondary">
  <button class="button" ng-click="addTip()">Submit</button>
</ion-nav-buttons>

<ion-content>
  {{xDescription}}
  <form ng-submit="addTip()">
    {{xDescription}}
    <div class="list">
      <label class="item item-input item-stacked-label">
        <textarea ng-model="xDescription" placeholder="bla bla"></textarea>
      </label>
    </div>

    <input class="button button-balanced padding" type="submit" id="submit" value="Submit" />
  </form>

And look where you get the output, if you are typing in the textarea.
Additionally to that you should read something about angularjs direktives, because they can have an own capsulated scope. So the scope-Variables are only present in that scope and not in the parent-scopes.

Define an object on your $scope --> and connect your input to that.

1 Like