Search code examples
angularjsangular-ui-routerionic-frameworkangularjs-routing

Ionic not reflecting Changes to parent scope


I have done this many time in pure angular.js with ng-router but dont know whats wrong with it here in ionic using ui-router

I want to have some $scope properties/objects on parent scope that i can read and modify from child scopes and they can reflect every where (without factory), so that refreshing between states doent loose data and i have common place to keep it

What i have tried:

I first tried whole app routes to be wrapped inside a div

<div ng-controller="appCtrl">
     <div ui-view></div>
 </div>

This doesn't helped so i made app state as an abstract state and controller and now all states inherit from it

.state('app', {
    url: "/app",
    abstract: true,
    controller : 'appCtrl',
    templateUrl: "templates/app.html"
  })

     .state('app.login', {
    url: "/login",
    parent:"app",
    //abstract: true,
    controller : 'loginCtrl',
    templateUrl: "templates/login.html"
  })
      .state('app.form', {
    url: "/form/:selectedForm",
    //abstract: true,
    //reload:true,
    parent:"app",
    controller : 'formCtrl',
    templateUrl: "templates/selected-form.html"
  })

Problem while trying:

Problem is that lets say i have a property $scope.selectedForm=21; on appCtrl , i can access it correctly(shows 21 in all states) but cant modify it ($scope.selectedForm=22;) it doesnt reflects back

Dummy cotrollers

appctrl(parent):

 .controller('appCtrl', function ($scope) {

        $scope.InspectedForms = [];
        $scope.currentForm= {}
        $scope.selectedForm=21;
    })

formCtrl(child):

 .controller('formCtrl', function ($scope, $stateParams, authService) {
             $scope.selectedForm=22;
});

Solution

  • The answer was very obvious, how come I forgot about dot rule

    Wasted my several hours, want to post it as if anyone else gets stuck to this kind of problem

    Changes are only reflected on objects and array and not on primitive types

    Parent:

    app.controller('Parentctrl',function($scope){
        $scope.parentprimitive = "some primitive value"
        $scope.parentobj = {};
        $scope.parentobj.parentproperty = "somevalue";
    });
    

    Child:

    app.controller('ctrlChild',function($scope){
        $scope.parentprimitive = "this will NOT modify the parent"
        $scope.parentobj.parentproperty = "this WILL modify the parent";
    });
    

    Here are details about the inheritance