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

您可以从voteController发出一个事件：

$scope.$emit("vote");

然后在topFiveController中侦听该事件：

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

我正在使用$emit，因为它会在$scope继承树上发送事件。根据你的标记，看起来voteController是topFiveController的子范围。如果它们是兄弟范围，或者如果topFiveController是voteController的子范围，则使用$scope.$broadcast而不是$emit。 $broadcast在继承树中发送事件。

Answer 2

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

来自1个控制器的$ http数据的变化会影响AngularJS中的另一个？

2 个答案: