Geek Answers Handbook

$ rootScope. $ broadcast in factory cannot change value in another scope of $

I have a home template (ionic) having a tab:

<ion-tab title="ACCOUNT" icon="ion-trophy" href="#/home/account" badge="levelBadge" badge-style="badge-assertive" on-select="enteringAccount()" on-deselect="leavingAccount()" ng-controller="homeTabCtrl">
            <ion-nav-view name="tab-account" animation="slide-left-right"></ion-nav-view>
        </ion-tab>

I want the levelBadge value to change when something happens in another area.

In another area, I have this controller (lessonCtrl). When a button is clicked on this view, the controller calls this function inside this controller:

$scope.testBoardcast = function() {
        MyFirebaseService.testBoardcast();
}

And inside MyFirebaseService (a factory) I have this function:

function testBoardcast() {
        $rootScope.$broadcast('level-up', 2);
}

And inside my homeTabCtrl home template, I listen to a similar event:

$rootScope.$on('level-up', function(event, data) {
        console.log ("App received level up boardcast: " + data);
        $scope.levelBadge = parseInt(data, 10); 
    });

But the problem is that when I press the button on lessonCtrl, the levelBadge does not receive updates, and even the console log "App received level up boardcast:" does not display the icon right after the button is clicked.

If I listen only to the homeTabCtrl scope as follows:

$scope.$on('level-up', function(event, data) {
        console.log ("App received level up boardcast: " + data);
        $scope.levelBadge = parseInt(data, 10); 
    });

, lessonCtrl.

, dynamicBadge , lessonCtrl.

: ui-:

.state('home', {
  cache: false,
    abstract: true,
    url: "/home",
    templateUrl: "app/home/home.html",
  controller: 'homeTabCtrl',
  onEnter: function($state, MyFirebaseService) {
    var userId = MyFirebaseService.LoginUserId();
    if (!userId) {
        $state.go('auth.signin');
    };
  }
})

.state('home.courses', {
  cache: false,
  url: "/courses",
  views: {
    "tab-courses": {
      templateUrl: "app/home/courses.html"
    }
  }
})

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

.state('app.lesson', {
  cache: false,
  url: "/lesson/:id",
  views: {
    'mainContent': {
      templateUrl: "app/all/lesson-detail.html",
      controller: "lessonCtrl"
    },
  }
})

, - . . LessonCtrl , App. . 2 .

+4
1

ui-router ($ stateProvider) , , . , , homeTabCtrl $broadcast.

. , TabCtrl - .

Level.levelUp(1);

homeTab

$scope.$watch(
  function () {
    return Level.currentLevel();
  },
  function(newVal, oldVal) {
    $scope.level = newVal;
  }
);

, : http://plnkr.co/edit/mAASNGNqr37k9n0RR89X?p=preview

Edit

, : http://plnkr.co/edit/hyKECbyYAG8XzUh8x58K?p=preview. , , .

, , , ( : angularjs, ui-router).

, , . singleton , , pub/sub.

+3

More articles:


All Articles