$ rootScope。$ factory在工廠中無法更改其他$ scope中的值

Question

我有一個家庭模板（離子）有一個像這樣的標簽：

<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>

我想在其他范圍內發生某些事情時更改levelBadge值。

在其他范圍內，我有這個控制器（lessonCtrl）。 單擊此視圖上的按鈕時，控制器在此控制器內調用此函數：

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

在MyFirebaseService（工廠）里面，我有這個功能：

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

在我的主頁模板homeTabCtrl中，我正在聽這樣的升級事件：

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

但問題是，當我點擊lessonCtrl上的按鈕時，levelBadge沒有得到更新，並且徽章也不會顯示甚至控制台日志“App received level level up boardcast：”在我點擊按鈕后立即顯示。

如果我只聽這樣的homeTabCtrl范圍：

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

單擊lessonCtrl上的按鈕時沒有任何反應。

當我在lessonCtrl中以完全不同的狀態單擊按鈕時，我不知道如何使levelBadge動態更改。

更新：這是我的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個不同的范圍。

Answer 1

我需要看到你的ui-router配置（$ stateProvider）來進一步調試你的代碼沒有按預期工作的原因。 這很可能是因為在調用$ broadcast時homeSabCtrl沒有被實例化。

一種解決方案是使用服務。 對服務進行更改，並在homeTabCtrl中查看該服務。

在您的課程控制器調用中

Level.levelUp(1);

然后在您的homeTab控制器中觀看Level服務以進行更改

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

這是一個設置此結構的plunker： http ：//plnkr.co/edit/mAASNGNqr37k9n0RR89X？p = preview

---

編輯

看看這個設置類似視圖層次結構的plunker： http ：//plnkr.co/edit/hyKECbyYAG8XzUh8x58K？p = preview。 請注意當您導航到應用程序和主頁狀態時，控制台日志如何打印init消息。

每次從主頁更改為應用程序狀態時，主控制器都會被取消實例化，並且應用程序控制器會被實例化（這個答案在某種程度上解釋了流程： angularjs控制器實例化，ui-router ）。

因此，當您進入應用程序狀態時，家庭狀態無法監聽事件。 單例服務將按您的意願工作，因此我建議使用它而不是pub / sub方法。