AngularJS：在angular-ui路由器中的状态之间共享控制器

Question

I have these router.js inside my ionic app ,

myapp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

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

     .state('app.myprofile', {
    url: "/myprofile",
       abstract: true,
    views: {
      'menuContent': {
          controller : "myprofileCtrl",
        templateUrl: "templates/myprofile.html"
      }
    }
  })
       .state('app.myprofile.info', {
    url: "/info",
 controller: "profileinfoCtrl",

        templateUrl: "templates/profile/info.html"

  })
        .state('app.myprofile.location', {

    url: "/location",
 controller: "profilelocationCtrl",

        templateUrl: "templates/profile/location.html"

  })


  $urlRouterProvider.otherwise('/');
});

I need a way to share controller scopes between myprofile state and myprofile.location state and myprofile.info state too .

I am using ionic framework

in myprofileCtrl

       myapp.controller("myprofileCtrl",function($scope,Authy ,Auth,$http ,$rootScope){
                  $scope.view_loading = true;
                   Authy.can_go().then(function(data){
$scope.profile =data.profile;

});
});

in profilelocationCtrl

 myapp.controller("profilelocationCtrl",function($scope,Authy ,Auth,$http ,$rootScope){
     console.log($scope.profile);

});

I got undefined in the console

Answer 1

I think the problem is that since $scope.profile is set after an ajax call, when the myprofile.location state is reached initially, then profile variable is still undefined on the parent $scope , what you could do is $watch the profile variable, or better just broadcast an event downwards when you receive it fro the server call using $broadcast .

$broadcast dispatches the event downwards to all child scopes, so you could do:

myapp.controller("myprofileCtrl",function($scope,Authy ,Auth,$http ,$rootScope){
     $scope.view_loading = true;
     Authy.can_go().then(function(data){
        $scope.profile =data.profile;
        $scope.$broadcast('profileSet', data.profile);
     });
});

and in the myprofile.location` state:

myapp.controller("profilelocationCtrl",function($scope,Authy,Auth,$http,$rootScope){
      $scope.$on('profileSet', function(event, data) { 
          console.log(data);
        });
      }

});

Have a look at this demo plunk I just made.