一个人如何范围的Angularjs厂家售后服务独特的数据返回给特定的控制器？ [英] How does one scope an Angularjs factory service to return unique data to a specific controller?

问题描述

我是新来angularjs，并已尝试使用angularui模块，来构建一个手风琴。对于每一个手风琴头我要它调用我的服务工厂嵌套的标签。服务工厂返回数据根据ID，并且更新我的内心手风琴内容然而，它更新它的所有手风琴头。因此，换句话说，点击手风琴头将加载所有手风琴的div相同的内容。我想它仅返回到点击的标题。我相信我需要了解我厂服务范围更多的帮助。所以我的问题是，如果有人能帮助我了解如何让我的服务工厂只更新它的调用者。

我的html：

 ＆LT;手风琴近他人=false的＆GT;
＆LT;手风琴组NG重复=部门的部门＆GT;
  ＆LT;手风琴标题＆GT;
    ＆LT;跨度NG控制器=DeptHeaderCtrlNG点击=loadEmps（dept.DeptID）＆GT;
      {{dept.DepartmentName}}（{{dept.DepartmentShortName}}）
    ＆LT; / SPAN＆GT;
  ＆LT; /手风琴标题＆GT;
  ＆LT; D​​IV NG控制器=departmentList＆GT;
    ＆LT; D​​IV NG重复=EMP在deptemps＆GT;
      {{emp.Name_First}}
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; /手风琴组＆gt;
 

angularjs厂家售后服务code：

  app.factory（'DeptFactory'，函数（$ HTTP，$ rootScope）{
      变种sharedDeptEmpList = {};      sharedDeptEmpList.EmpList ='';      sharedDeptEmpList.fetchDeptEmps =功能（DEPTID）{
        VAR部门= {将把userid：用户ID，DEPTID：DEPTID};        $ HTTP（{方法：POST，网址：'API /读取/ DeptEmployees /'数据：部门}）。
      成功（功能（数据，状态，头，配置）{
        EmpList =数据;
        sharedDeptEmpList.broadCastEmpList（）;
      }）。
      错误（功能（数据，状态，头，配置）{
        警报（'错误'）;
      }）;      };      sharedDeptEmpList.broadCastEmpList =功能（）{
        警报（'广播'）;
        $ rootScope $广播（'handleBroadcast'）。
      };
      返回sharedDeptEmpList;    }）;
 

Angularjs控制器，接收广播：

  app.controller（'departmentList'，函数（$范围，$ HTTP，DeptFactory）{      $ scope.init =功能（p_userid）{
        用户id = p_userid;
      };
      $范围。在$（'handleBroadcast'，函数（）{
        警报（广播接收'）;
        $ scope.deptemps = EmpList;
      }）;  }）;
 

解决方案

每个指令仅仅是一些JavaScript的关联与给定的范围DOM节点。你认为DOM树的同样的方法，你可以把范围树。另一方面，服务都可以注射和使用的任何地方只是单一对象。他们到DOM /范围树没有隐含的关系。

通过注入$ rootScope到DeptFactory，你给它访问整个范围树。当你调用$广播（），你在整个树发送事件，在根开始，再向外传播到所有的叶作用域。

我没有看到你的不足code的完全理解发生了什么，但我猜你看到所有的手风琴div的变化，因为他们都收到您的$广播事件，反应用同样的方式。我建议你​​$播出某种ID值，以确定哪些div的你正在尝试改变。然后，当你处理每一个手风琴这种情况下，检查对手风琴的ID标识，看看它应该改变与否。

这是否帮助？

I'm new to angularjs and have been attempting to use the angularui modules to build an accordion. For each accordion header I have a nested tag to which calls my service factory. The service factory returns data according to the id and updates my inner accordion content however it updates it for all of the accordion headers. So in other words, clicking on an accordion header will load the same content for all accordion divs. I would like it to return only to the clicked header. I believe I need more help in understanding the scope of my factory service. So my question is if someone can help me understand how to get my service factory to only update it's caller.

my html:

<accordion close-others="false">
<accordion-group ng-repeat="dept in departments"> 
  <accordion-heading>
    <span ng-controller="DeptHeaderCtrl" ng-click="loadEmps(dept.DeptID)">
      {{dept.DepartmentName}} ({{dept.DepartmentShortName}})
    </span>
  </accordion-heading> 
  <div ng-controller="departmentList">
    <div ng-repeat="emp in deptemps">
      {{emp.Name_First}}
    </div>
  </div>
</accordion-group>

angularjs factory service code:

app.factory('DeptFactory', function ($http, $rootScope) {
      var sharedDeptEmpList = {};

      sharedDeptEmpList.EmpList = '';

      sharedDeptEmpList.fetchDeptEmps = function (deptid) {
        var dept = { "userid": userid, "deptid": deptid };

        $http({ method: 'POST', url: 'api/Fetch/DeptEmployees/', data: dept }).
      success(function (data, status, headers, config) {
        EmpList = data;
        sharedDeptEmpList.broadCastEmpList();
      }).
      error(function (data, status, headers, config) {
        alert('error');
      });

      };

      sharedDeptEmpList.broadCastEmpList = function () {
        alert('broadcasting');
        $rootScope.$broadcast('handleBroadcast');
      };


      return sharedDeptEmpList;

    });

Angularjs controller that receives broadcast:

app.controller('departmentList', function ($scope, $http, DeptFactory) {

      $scope.init = function (p_userid) {
        userid = p_userid;
      };


      $scope.$on('handleBroadcast', function () {
        alert('broadcast received');
        $scope.deptemps = EmpList;
      }); 

  });

解决方案

Each directive is just some javascript that associates a DOM node with a given scope. The same way you think of the DOM tree, you can think of a "scope tree". On the other hand, services are just singleton objects that can be injected and used anywhere. They have no implicit relationship to the DOM/scope tree.

By injecting $rootScope into your DeptFactory, you are giving it access to the entire scope tree. When you call $broadcast(), you are sending an event throughout the entire tree, beginning at the root, and then propagating outwards to all of the leaf scopes.

I don't see enough of your code to completely understand what's happening, but I'm guessing that you're seeing all of your accordion divs change because they are all receiving your $broadcasted event, and reacting to it the same way. I would suggest you $broadcast some sort of ID value to identify which div you are trying to change. Then, when you handle this event in each accordion, check the ID against the accordion's ID to see it should change or not.

Does this help?

这篇关于一个人如何范围的Angularjs厂家售后服务独特的数据返回给特定的控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！