CODEWITHSUNDEEP
angularjsionic-framework
Manish Kumar
Manish Kumar

Reputation: 10482

model is never updating inside controller

Here is app.js

  .state('search', {
      url: '/search',
      templateUrl: 'templates/search-pages/home.html',
      controller: 'SearchController'
  })  

  .state('search/search-form', {
      url: '/search/search-form',
      templateUrl: 'templates/search-pages/search-form.html',
      controller: 'SearchController'
  })

  .state('search/search-form-settings', {
      url: '/search/search-form-settings',
      templateUrl: 'templates/search-pages/search-form-settings.html',
      controller: 'SearchController'
  })  

  $urlRouterProvider.otherwise('/search');

home.html

<ion-view>
<ion-nav-buttons side="right">
  <a class="button button-icon icon ion-android-search" href="#search/search-form"></a>
</ion-nav-buttons>
  <ion-content class="padding">    
        <div ng-repeat="data in searchResult">
                {{data.title}}
        </div>     
  </ion-content>
</ion-view>

On clicking searh button below page is opened.

searchForm.html:

<ion-nav-buttons side="right">
  <button class="button button-icon icon ion-android-done" ng-disabled="npubmUsrLocForm.form.$invalid"  ng-click="searchByTag()"></button>  
</ion-nav-buttons>

here is searchControllet.js :

  $scope.searchResult = [{title:"this is 1"},{title:"this is 2"}];
  alert("init");
    $scope.searchByTag = function()
    {

    $scope.searchResult.push({title:"this is 3"});
    $scope.searchResult.push({title:"this is 4"});
    $state.go('search');
    alert($scope.searchResult.length);

in this alert it show lengh 4 but in HTML page it only render {title:"this is 1"},{title:"this is 2"}

Upvotes: 0

Views: 28

Answers (1)

o4ohel
o4ohel

Reputation: 1789

two things that need to be fixed are your states and your urls:

.state('search', {
  url: '/search',
  templateUrl: 'templates/search-pages/home.html',
  controller: 'SearchController'
})  

.state('search.search-form', {
  url: '/search-form',
  templateUrl: 'templates/search-pages/search-form.html',
  controller: 'SearchController'
})

.state('search.search-form-settings', {
  url: '/search-form-settings',
  templateUrl: 'templates/search-pages/search-form-settings.html',
  controller: 'SearchController'
})  

$urlRouterProvider.otherwise('/search');

The states should be in format 'parent.child' not 'parent/child'.

The urls are relative from the parent url.

Then your HTML should probably be something like:

<ion-view>
  <ion-nav-buttons side="right">
    <a class="button button-icon icon ion-android-search" ui-sref="search.search-form"></a>
  </ion-nav-buttons>
  <ion-content class="padding">   
    <ui-view/> 
    <div ng-repeat="data in searchResult">
            {{data.title}}
    </div>     
  </ion-content>
</ion-view>

Upvotes: 1

Related Questions