1个控制器中的$ http数据发生变化，以影响AngularJS中的另一个控制器？

因此，如果我的数据来自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 
    } 
] 
}

来源

2014-10-08 tweb

我们需要查看您的musicData服务以了解其工作原理。简单的方法是在'topFiveController'内的'music.getMusic（）'上放置'$ watch'，但这可能会对您的应用程序带来性能影响。 – 2014-10-08 17:16:13

谢谢！我刚刚编辑了我的帖子，并添加了如何设置json对象。 – tweb 2014-10-08 17:24:22

从外观上看，你实际上需要使用$ 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 
});

来源

2014-10-08 17:39:38

http://jsfiddle.net/webtj01/tvg6h0py/我会设置这样的东西吗？ – tweb 2014-10-08 21:50:28

它目前的设置方式，你可以这样做：http://jsfiddle.net/tvg6h0py/1/。然而，我只是注意到它有一个奇怪的结构。您是否确实在每个曲目的ng-repeat中嵌套了投票部分？投票管理员是否正确地将喜欢/不喜欢的内容添加到曲目中，即使它没有更新前五个视图？ – 2014-10-09 00:35:31

嘿tweb，你可以避免使用发射或广播，只需在ng-repeat中嵌套你的投票div。你可以在plnkr上演示它：http://plnkr.co/edit/4de2DwGyqQMrdLEnLAHI?p=preview。不过，我对你的语义进行了一些修改。我把你的ng-repeat改成了“音乐中的歌”而不是“music.music中的音乐”。“要做到这一点，我将data.data.music直接传递给$ scope.music而不是topFiveController中的data.data。我还在voteController中更改了你的upvote和downvote函数，以便清晰地使用歌曲而不是音乐。回来，如果你想 – 2014-10-09 00:54:10

可以发出事件从voteController：

$scope.$emit("vote");

，然后听你的topFiveController该事件：

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

我使用$emit，因为这将发送事件了$scope继承树。根据你的标记，它看起来像voteController是一个topFiveController的子范围。如果它们是兄弟范围，或者topFiveController是voteController的子范围，则使用$scope.$broadcast而不是$emit。 $broadcast向继承树发送事件。

来源

2014-10-08 17:26:22 sma

1个控制器中的$ http数据发生变化，以影响AngularJS中的另一个控制器？

回答

相关问题