如何将Angularjs工厂服务范围扩展为将特定数据返回给特定控制器?

时间:2013-10-21 19:37:43

标签: angularjs angular-ui

我是angularjs的新手并且一直在尝试使用angularui模块来构建手风琴。对于每个手风琴标题,我有一个嵌套标签,调用我的服务工厂。服务工厂根据id返回数据并更新我的内部手风琴内容,但是它会为所有手风琴标题更新它。换句话说,点击手风琴标题将为所有手风琴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控制器:

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

  });

1 个答案:

答案 0 :(得分:3)

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

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

我没有看到足够的代码来完全理解正在发生的事情,但我猜你看到你所有的手风琴div都发生了变化,因为他们都收到了你的广播事件,并对它做出同样的反应办法。我建议你$广播某种ID值来识别你想要改变的div。然后,当您在每个手风琴中处理此事件时,请根据手风琴的ID检查ID,看它是否应该更改。

这有帮助吗?