1個控制器中的$ http數據發生變化，以影響AngularJS中的另一個控制器？

Question

因此，如果我的數據來自JSON $ http，我該如何做到這一點，如果我點擊一個控制器上的投票，它會按順序排序另一個控制器上的投票？

我有什麼到目前爲止心不是正確的工作，它看起來像共享數據並捕獲控制器之間的任何變化......把它看

app.controller('voteController', function ($scope, musicData) { 

    musicData.getMusic().then(function(data){ 
     $scope.music = data.data; 
    }); 


    $scope.upVote = function(music) { 

     music.likes++; 

    }; 

    $scope.downVote = function(music) { 

     music.dislikes--; 

    }; 

}); 

// controller for top 5 charts 
app.controller('topFiveController', function ($scope, musicData) { 

    musicData.getMusic().then(function(data){ 
     $scope.music = data.data; 
    }); 

    $scope.sortorder = '-likes'; 


}); 

// factory to share data between controllers 
app.factory('musicData', function($http) { 
    var factory = {}; 

    factory.getMusic = function() { 
     return $http.get('app/data/music.json'); 
    }; 


    return factory; 
}); 

，這就是我在標記

<div id="topMusic" ng-controller="topFiveController" ng-model="sortorder"> 
        <h3 class="title"><i class="fa fa-hand-o-right"></i> Top 5 titles</h3> 
        <ul> 
         <li ng-repeat="music in music.music | orderBy:sortorder | limitTo: 5"> 
          {{music.artist}} - "{{music.title}}" 
         </li> 
        </ul> 
</div> 


<div id="voteMusic" ng-controller="voteController"> 
    <h1>Vote here</h1> 
    <ul> 
       <li class="likeMe" ng-click="upVote(music)"> 
       <i class= "fa fa-thumbs-up" ></i> like - {{music.likes}}</li> 
       <li class="dislikeMe" ng-click="downVote(musics)"> 
       <i class="fa fa-thumbs-down"></i>dislikes - 
       {{music.dislikes}}</li> 

    </ul> 

</div> 

這是JSON文件看起來像

{"music": [ 
    { 
     "artist": "Artst 1", 
     "title": "title one", 
     "likes": 10, 
     "dislikes": 1 
    }, 
    { 
     "artist": "Artst 2", 
     "title": "title 2", 
     "likes": 5, 
     "dislikes": 1 
    }, 
    { 
     "artist": "Artst 3", 
     "title": "title 3", 
     "likes": 3, 
     "dislikes": 1 
    }, 
    { 
     "artist": "Artst 4", 
     "title": "title 4", 
     "likes": 2, 
     "dislikes": 1 
    }, 
    { 
     "artist": "Artst 5", 
     "title": "title 5", 
     "likes": 1, 
     "dislikes": 1 
    } 
] 
} 

Answer 1

從外觀上看，你實際上需要使用$ rootScope。$ broadcast而不是$ scope。$ emit，正如sma建議的那樣。當你有你的標記時，voteController實際上並不是topFiveController的子元素。在你voteController，你將需要注入$ rootScope作爲依賴，然後用：

$rootScope.$broadcast('vote'); 

和topFiveController：

$scope.$on('vote', function() { 
    // sort 
}); 

如果你想更新topFiveController音樂對象，以顯示而不必再次從音樂服務中獲得新的投票，你也可以做到這一點在你的voteController：

$rootScope.$broadcast('vote', $scope.music); 

然後做你的topFiveController：

$scope.$on('vote', function(music) { 
    $scope.music = music; 
    // sort 
}); 

Answer 2

可以發出事件從voteController：

$scope.$emit("vote"); 

，然後聽你的topFiveController該事件：

$scope.$on("vote", function() { 
    // sort 
}); 

我使用$emit，因爲這將發送事件了$scope繼承樹。根據你的標記，它看起來像voteController是一個topFiveController的子範圍。如果它們是兄弟範圍，或者topFiveController是voteController的子範圍，則使用$scope.$broadcast而不是$emit。 $broadcast向繼承樹發送事件。