以角度在控制器外部单击时刷新数据答案

【问题标题】：Refresh data on click outside controller in angular以角度在控制器外部单击时刷新数据
【发布时间】：2013-05-16 08:29:30
【问题描述】：

我试图掌握 angular 背后的想法，但遇到了第一个障碍，涉及从范围外访问数据（应用程序？）

这是我正在尝试做的一个非常简单的示例：

HTML：

<div class=logo>
    <a href='/refresh'>Refresh</a>
</div>
<div ng-app ng-controller="threadslist">
<div class='thread_list_header'>
    <table class='thread_list_table'>
    <tr class='table_header'>
        <!--1--><td class='table_c1'></td>
        <!--2--><td class='table_c2'>{{name}}</td>
        <!--3--><td class='table_c3'>Cliq</td>
        <!--4--><td class='table_c4'>Last Poster</td>
        <!--5--><td class='table_c5'><a class="clickme">Refresh</a></td>
    </tr></table>
</div>
<table class='thread_list_table' >
    <tr class="thread_list_row" ng-repeat="user in users">
                <!--1--><td class='table_options table_c1'></td>
        <!--2--><td class='table_subject table_c2' title="">{{user.subject}}</td>
                <!--3--><td class='table_cliq table_c3'></td>
                <!--4--><td class='table_last table_c4'><span class="thread_username"><a href=#>{{user.username}}</a></span></td>
                <!--5--><td class='table_reply table_c5'><abbr class="thread_timestamp timeago" title=""></abbr></td>
    </tr>
    </table>
</div>

JS：

function threadslist($scope, $http) {
  $scope.name = 'Ricky';

  // Initialising the variable.
  $scope.users = [];
     $http({
    url: '/cliqforum/ajax/ang_thread',
    method: "POST",
  }).success(function (data) {
      console.log(data);
    $scope.users = data;
  });
  // Getting the list of users through ajax call.
  $('.table_header').on('click', '.clickme', function(){
        $http.get('/cliqforum/ajax/ang_thread').success(function(data){

            $scope.users = data;
        });   
  });
}

这是我想不通的部分。我的徽标应该清除当前“用户”数据上的任何过滤器。但是，它位于范围之外（我想我不应该将范围扩大到整个页面？）

我已经阅读了一些关于 scope.$spply 的内容，但不太清楚我应该做什么：

 $('.logo').on('click', 'a', function() {
         scope.$apply(function () {
            $scope.users = data;
        });
    });

我没有必要这样做……我只想做正确的事！

谢谢！

【问题讨论】：

标签： angularjs

【解决方案1】：

我想我不应该将范围扩大到整个页面？

为什么不呢？这绝对是这样做的方法。只需将徽标包含在范围中，然后您就可以从您的应用程序中访问它，并使用 ng-click 添加点击处理程序。

事实上，您应该避免在应用程序中使用 jQuery 点击处理程序。你可以像这样转换你的 JavaScript：

$scope.tableHeaderClick = function() {
    $http.get('/cliqforum/ajax/ang_thread').success(function(data){
        $scope.users = data;
    });   
});

然后像这样更新 HTML：

<tr class='table_header' ng-click="tableHeaderClick()">

【讨论】：

谢谢！关于“为什么不”：我想我脑子里有来自 jquery 的 .on() 的想法。

【解决方案2】：

在控制器中包含 DOM 元素是一种角度反模式。你想使用 ng-click 指令来响应点击事件

看到这个plnkr： http://plnkr.co/edit/KRyvifRYm5SMpbVvWNfc?p=preview

【讨论】：

谢谢，感谢我能得到的所有信息。