AngularJS doesn't bind ng-model to scope

Question

I have the following code for my search function

<ion-content class="has-header" id="content" push-search>
  <div id="search-bar">
   <div class="item item-input-inset">
     <label class="item-input-wrapper" id="search-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Search" ng-model="query" ng-change="search()">
     </label>
    </div>
   </div>
  <div>
   <// code for displaying search results//>
</ion-content>

Search Controller

.controller('SearchCtrl', function($scope, SearchFactory) {
  var doSearch = ionic.debounce(function(query) {
    console.log($scope);
    $scope.results = SearchFactory.get({'query':$scope.query});
  }, 500);
  $scope.search = function() {
    doSearch($scope.query);
  }
})

Search Factory:

.factory('SearchFactory', function($resource) {
   return $resource(url.concat('/paths/search/:query'), 
                   {query: '@query' } ,
                   { get: { method: 'GET' , isArray: true} }
           );

})

When I do call Search, there is no $scope.query in my $scope: (see) https://i.sstatic.net/MuxRt.png

What happens when you initialize it to an empty string at the top of your controller? — Blazemonger
– Blazemonger, Commented Oct 22, 2014 at 13:27
@Blazemonger the field $scope.query appears, but remains empty even if there are changes in the search text field. see: i.imgur.com/qz46PK3.png — Wheatley
– Wheatley, Commented Oct 22, 2014 at 13:40
The code is too complex to refactor into single files for plunkr — Wheatley
– Wheatley, Commented Oct 22, 2014 at 13:43
Here is a plunkr of the work I have done so far plnkr.co/edit/3IECH5Mmjbjx3q8WH4sZ — Wheatley
– Wheatley, Commented Oct 22, 2014 at 14:04

Wheatley · Accepted Answer · 2014-10-22 18:35:37Z

4

It was solved. See this Link for more info http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

answered Oct 22, 2014 at 18:35

Wheatley

1331 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ayub Over a year ago

Confirmed this solves it if Angular models aren't working in Ionic

eric gilbertson · Accepted Answer · 2017-06-24 04:14:35Z

0

Short answer is that the "query" needs to be a field in a scope search object so that it is passed by reference rather than by value, eg:

.controller('SearchCtrl', function($scope, SearchFactory) {
  $scope.searchParams = {};
  $scope.searchParams.query = '';

  var doSearch = ionic.debounce(function(query) {
    console.log($scope);
    $scope.results =SearchFactory.get({'query':$scope.searchParams.query});
  }, 500);

answered Jun 24, 2017 at 4:14

eric gilbertson

1,0039 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS doesn't bind ng-model to scope

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related