Scope controller data-binding

1

Hi,

I don’t understand why data-binding is not working. When I change the value of “query” from the view. The value still undefined from the controller associated with the view. Do I miss something about scopes?

home template:

<ion-content has-header="true" padding="true">
input:<input type="text" style="background-color:#ff9" 
ng-model="query" ng-change="search()" />
      query:{{query}}
</ion-content>

my controller:

.controller('myCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.search = function () {    
      alert($scope.query);
   };
})

state definition:

.state('eventmenu.home', {
  url: "/home",
  views: {
    'menuContent' :{
      templateUrl: "home.html",
      controller:"myCtrl"
    }
  }
})

Here is a plunk to understand what I mean.

2

You need to be using “dot notation”. Because of inheritance, simple values will not do two way binding.

Here is a working example : http://codepen.io/calendee/pen/Jxozn

Definitive Resource : https://github.com/angular/angular.js/wiki/Understanding-Scopes

2 Likes
3

Thank you very much!!! I was used to use dot notation every time and I never notice and fully understand primitive data-binding!