angularjs - 如何确定 Angularjs 工厂服务的范围以将唯一数据返回到特定 Controller ？

Question

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

我的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工厂服务代码:

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 :

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

  });

Answer 1

每个指令只是一些将 DOM 节点与给定范围关联起来的 javascript。就像您考虑 DOM 树一样，您可以考虑“范围树”。另一方面，服务只是可以在任何地方注入(inject)和使用的单例对象。它们与 DOM/范围树没有隐式关系。

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

我没有看到足够的代码来完全理解发生了什么，但我猜你看到所有的 Accordion div 都发生了变化，因为它们都接收到了你的 $broadcasted 事件，并对它做出了相同的 react 方式。我建议您 $broadcast 某种 ID 值来识别您要更改的 div。然后，当您在每个折叠面板中处理此事件时，根据折叠面板的 ID 检查 ID 以查看它是否应该更改。

这有帮助吗？