Angular JS - 在两个 div 中使用的控制器 - 一个用于触发事件。视图不更新

Question

我在同一页面的两个不同 div 中使用了 angularjs 中的控制器：

一个 div 是一个类似过滤器的东西：

<div class="upload_date mar_btm" ng-controller="recentuploadsController">
                    <ul>
                    <li><a onclick="filterTopSearch(1)">Today</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(7)">Last 7 Days</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(30)">Last 30 Days</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(365)">Last 12 Months</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(0)">All Time</a></li>
                    </ul>           
</div>

另一个是实际的 dive 它应该更新的地方：

<div class="recent_uploads mar_btm" ng-controller="recentuploadsController">
                        <div class="mar_btm titl_img"><h6>Recent Uploads</h6><!--<img alt="recent uploads" src="<?php echo base_url(); ?>public/image/net03.png">--></div>
                        <input type="text" ng-model="search.text" class="community-searching hide">
                        <button ng-click="clearSearch()" class="hide">clear</button>
                        <div class="rec_uplist_cont">
                            <div class="rec_uplist_slider">                         
                            <div class="flex-viewport" style="overflow: hidden; position: relative;">
                                <ul class="slides" style="width: 800%; transition-duration: 0.6s; transform: translate3d(-240px, 0px, 0px);">
                                        <div class="recnt_info" ng-if="recentupload!=null"><p> No Data Found</p></div>

                                        <li id="apptest" style="width: 226px; float: left; display: block;" class="animate-repeat" ng-repeat="recentupload in recentuploads | filter:search.text">

                                        </li>
                                </ul>
                            </div>
                            <ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li></ol><ul class="flex-direction-nav"><li><a href="#" class="flex-next">Next</a></li><li><a href="#" class="flex-prev">Previous</a></li></ul></div>
                        </div>
                </div>

这里是 AngularJS 控制器：

app.controller('recentuploadsController', function ($scope, $http) {
  //  console.log("Angular in role now");
    /**
     * Get list of all hashtags realtime
     */
$scope.getTimely = function(day) {
                //alert('here');
                $scope.days = day;
                $http.get(base_url + 'getAllUsers/getRecentUploads?key='+day).success(function(data, status, headers, config)
                {
                 $scope.recentuploads= data;   
                 $scope.search = {text:null};
                  $scope.clearSearch = function () {
                $scope.search={text:null};
            }
                $scope.loadTrendingStuff = function(hashtag) {
                // get single hashtag id
                $scope.hashtag=hashtag


            }
                 console.log(data);
                $scope.$apply(function() {
     $rootScope.data = data;
});
                });
            }


    $http.get(base_url + 'landing/getRecentUploads').
        success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            $scope.recentuploads = data;
            $scope.search = {text:null};
            $scope.clearSearch = function () {
                $scope.search={text:null};
            }
            $scope.loadTrendingStuff = function(hashtag) {
                // get single hashtag id
                $scope.hashtag=hashtag



            }




        }).
        error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
    });






});

我想知道我哪里错了？数据从后端发布，并很好地记录到控制台。但是视图没有更新。这是为什么？当我在我的应用程序中使用它两次时是否创建了同一个控制器的两个实例（正如我在研究时阅读的那样）。请回答。谢谢！

Answer 1

您可以尝试将两个 div 封装在另一个 div 中，而没有任何 css class，这样它就不会破坏任何视图。如果 div 位于单独的容器中并且无法提供单个控制器值，则您可以尝试使用不同的控制器并尝试在它们之间进行通信。这可能会有所帮助。 What's the correct way to communicate between controllers in AngularJS?

Answer 2

正如 paje007 所建议的，我也建议使用单独的控制器。它会解决你的问题。在这个 plunker 中获得战利品。该示例使用 $rootScope.$emit 和 $rootScope.$on 在第三个和第一个控制器之间进行通信。

Answer 3

终于弄清楚哪里出了问题，对于其他人，这是我所做的：

分离控制器，创建一个服务方法来共享数据，正如 Saad 在示例中解释的那样，我使用 $routeScope.$on 触发器来更新每个请求的数据。

希望对大家有所帮助！

Angular JS - 在两个 div 中使用的控制器 - 一个用于触发事件。视图不更新

Angular JS - Controller used in two divs - one for triggering an event. View does not update

jquery

angularjs

angularjs-directive

angularjs-scope

angularjs-ng-repeat