刷新外角控制器上点击数据 [英] Refresh data on click outside controller in angular

问题描述

我试图抓住背后角的想法，并跑进我从涉及的范围之外访问数据的第一个障碍（应用程序？）

下面是什么，我试图做一个很简单的例子：

HTML

 ＆LT; D​​IV CLASS =标志＆GT;
    ＆LT; A HREF ='/刷新'＆GT;＆刷新LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV NG-NG应用程序控制器=threadslist＆GT;
＆LT; D​​IV CLASS ='thread_list_header'＆GT;
    ＆LT;表类='thread_list_table'＆GT;
    ＆LT; TR类='table_header'＆GT;
        ＆LT;！ -  1  - ＆GT;＆LT; TD类='table_c1'＆GT;＆LT; / TD＆GT;
        ＆LT;！ -  2  - ＆GT;＆LT; TD类='table_c2'＆GT; {{名}}＆LT; / TD＆GT;
        ＆LT;！ -  3  - ＆GT;＆LT; TD类='table_c3'＆GT;的Cliq＆LT; / TD＆GT;
        ＆LT;！ -  4  - ＆GT;＆LT; TD类='table_c4'＆GT;最后海报＆LT; / TD＆GT;
        ＆所述;！ -  5  - ＆GT;＆下; TD类='table_c5'＆GT;＆下;类别=clickme＆GT;刷新＆下; / A＆GT;＆下; / TD＆GT;
    ＆LT; / TR＆GT;＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT;表类='thread_list_table'＆GT;
    ＆LT; TR类=thread_list_rowNG重复=用户用户＆GT;
                ＆LT;！ -  1  - ＆GT;＆LT; TD类='table_options table_c1'＆GT;＆LT; / TD＆GT;
        ＆LT;！ -  2  - ＆GT;＆LT; TD类='table_subject table_c2称号=＆GT; {{user.subject}}＆LT; / TD＆GT;
                ＆LT;！ -  3  - ＆GT;＆LT; TD类='table_cliq table_c3'＆GT;＆LT; / TD＆GT;
                ＆所述;！ -  4  - ＆GT;＆下; TD类='table_last table_c4'＆GT;＆下;跨度类=thread_username＆GT;＆下; A HREF =＃＆GT; {{user.username}}＆下; / A＆GT ;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
                ＆LT;！ -  5  - ＆GT;＆LT; TD类='table_reply table_c5'＆GT;＆LT;简称类=thread_timestamp TIMEAGO称号=＆GT;＆LT; /缩写＆GT;＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; /表＆gt;
＆LT; / DIV＆GT;
 

JS：

 函数threadslist（$范围，$ HTTP）{
  $ scope.name ='瑞奇';  //正在初始化变量。
  $ scope.users = [];
     $ HTTP（{
    网址：'/ cliqforum / AJAX / ang_thread'，
    方法：POST，
  }）。成功（功能（数据）{
      的console.log（数据）;
    $ scope.users =数据;
  }）;
  //获取用户的列表中，通过Ajax调用。
  $（'。table_header'）。在（'点击'，'.clickme'，函数（）{
        $ http.get（'/ cliqforum / AJAX / ang_thread'）。成功（功能（数据）{            $ scope.users =数据;
        }）;
  }）;
}
 

这是我想不通的部分。我的标志应该是什么清除过滤器是对当前用户的数据。然而，它所在的范围之外（和我想象我不应该扩大范围是整个页面？）

我看了一些关于 $范围spply ，但不能完全弄清楚什么我应该做的：

  $（'标志'）。在（'点击'，'A'，函数（）{
         范围。$应用（函数（）{
            $ scope.users =数据;
        }）;
    }）;
 

这不是很必要的，我做的是这样......我只想做的是正确的！

谢谢！

解决方案

  

和我想象我不应该扩大范围是整个页面？

为什么不呢？这绝对做到这一点的方式。只是包括标志进入的范围，然后你可以从你的应用程序访问它，并使用 NG-点击来添加一个单击处理程序。

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

  $ scope.tableHeaderClick =功能（）{
    $ http.get（'/ cliqforum / AJAX / ang_thread'）。成功（功能（数据）{
        $ scope.users =数据;
    }）;
}）;
 

然后更新，像这样的HTML：

 ＆LT; TR类='table_header'NG点击=tableHeaderClick（）＆GT;
 

I am trying to grasp the idea behind angular and ran into my first obstacle involving accessing data from outside the scope (the app?)

Here is a very simple example of what I'm trying to do:

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

This is the part I can't figure out. My logo is supposed to clear whatever filter is on the current 'user' data. However, it sits outside the scope (and I imagine I shouldn't expand the scope to be the entire page?)

I have read something about scope.$spply but can't quite figure out what I'm supposed to do:

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

It's not quite necessary that I do it THIS way...I would just like to do what is correct!

Thanks!

解决方案

and I imagine I shouldn't expand the scope to be the entire page?

Why not? That's definitely the way to do it. Just include the logo into the scope and you can then access it from your application, and use ng-click to add a click handler.

In fact, you should avoid using jQuery click handlers within your application. You could transform your JavaScript like so:

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

Then update the HTML like so:

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

这篇关于刷新外角控制器上点击数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！