Possible scope issue with forms and nav-buttons not compiling correctly

ionic-v1
1

I’m not sure if I’m doing something wrong, or if there is a scope issue with my example here: http://codepen.io/gnomeontherun/pen/ruftC/

There are really two separate issues. I force the modal to open by default, because the top right + button does not trigger it right now.

  1. Putting an ng-click on the ion-nav-buttons does not seem to be compiled right, as putting ng-click="console.log('testing')" doesn’t trigger. The directive looks ok, and I added ng-class="{test: true}" and it adds the class test correctly.
  2. After the modal is open, it should share the same scope as the controller, and the Create button calls the method to add a name. The input has ng-model="form.name" but when you click Create it claims it cannot read the model “Cannot read property ‘name’ of undefined” meaning that the ng-model value isn’t being picked up in the scope.

I’m scratching my head on these two right now, any ideas? Thanks!

2
  1. You were using ‘showModal’ but your method was called ‘openModal’
  2. I prettied up your header bar buttons a bit
  3. I initialized $scope.form to {} so your model would be sure to work.

3

‘showModal()’ Thanks for that sanity check and button styles. I also updated to fix the left side menu too in my example.

Any idea why you have to initialize $scope.form? Is that true in Angular as well? I don’t recall running into this problem before without declaring a model like this.

4

It’s because the modal creates a new scope that’s a child of the controller scope, and therefore the modal’s scope was creating its own form object, which the controller scope then couldn’t read.

I think the most failproof, more testable way to do it in the future would be to pass the variable into the function itself. Example:

$scope.printName = function(name) {
  console.log(name);
};

<input ng-model="name">
<button ng-click="printName(name)">Print it!</button>
5

Thanks, I see now where you create the child scope. Reference for anyone else looking https://github.com/driftyco/ionic/blob/e1db1cb06a3fc7ec6feb8b5eef89f3d84ed39180/js/ext/angular/src/service/ionicModal.js#L170