如何确定 Angularjs 工厂服务的范围以将唯一数据返回给特定控制器? [英] How does one scope an Angularjs factory service to return unique data to a specific controller?

问题描述

我是 angularjs 的新手，一直在尝试使用 angularui 模块来构建手风琴.对于每个手风琴标题，我都有一个嵌套标签，用于调用我的服务工厂.服务工厂根据 id 返回数据并更新我的内部手风琴内容，但是它为所有手风琴标题更新它.因此，换句话说，单击手风琴标题将为所有手风琴 div 加载相同的内容.我希望它只返回到点击的标题.我相信我需要更多帮助来了解我的工厂服务范围.所以我的问题是，是否有人可以帮助我了解如何让我的服务工厂只更新它的调用者.

我的 html:

<accordion-group ng-repeat="部门部门"><手风琴标题><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}}

</accordion-group>

angularjs 工厂服务代码:

app.factory('DeptFactory', function ($http, $rootScope) {var sharedDeptEmpList = {};sharedDeptEmpList.EmpList = '';sharedDeptEmpList.fetchDeptEmps = 函数(deptid){var dept = { "userid": userid, "deptid": deptid };$http({ method: 'POST', url: 'api/Fetch/DeptEmployees/', data: dept }).成功(功能(数据，状态，标题，配置){EmpList = 数据；sharedDeptEmpList.broadCastEmpList();}).错误(功能(数据，状态，标题，配置){警报('错误')；});};sharedDeptEmpList.broadCastEmpList = 函数 () {alert('广播');$rootScope.$broadcast('handleBroadcast');};返回 sharedDeptEmpList;});

接收广播的Angularjs控制器:

app.controller('departmentList', function ($scope, $http, DeptFactory) {$scope.init = 函数(p_userid){用户 ID = p_userid;};$scope.$on('handleBroadcast', function () {alert('收到广播');$scope.deptemps = EmpList;});});

解决方案

每个指令只是一些 javascript，用于将 DOM 节点与给定范围相关联.与您想到 DOM 树的方式相同，您可以想到范围树".另一方面，服务只是可以在任何地方注入和使用的单例对象.它们与 DOM/作用域树没有隐式关系.

通过将 $rootScope 注入您的 DeptFactory，您可以访问整个范围树.当您调用 $broadcast() 时，您将在整个树中发送一个事件，从根开始，然后向外传播到所有叶范围.

我没有看到足够多的代码来完全理解发生了什么，但我猜你会看到所有的手风琴 div 都发生了变化，因为它们都在接收你的 $broadcasted 事件，并且对它做出相同的反应道路.我建议您 $broadcast 某种 ID 值来识别您要更改的 div.然后，当您在每个手风琴中处理此事件时，根据手风琴的 ID 检查 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屋！