Question

我正在尝试掌握角度背后的想法，并遇到了涉及从范围之外访问数据的第一个障碍（应用程序？）

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

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;
        });
    });

我这样做并不是必要的......我只想做正确的事！

谢谢！

Answer 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()">

Answer 2

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

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

单击外部控制器的角度刷新数据

2 个答案: