我是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;
});
});
答案 0 :(得分:3)
每个指令只是一些将DOM节点与给定范围相关联的javascript。与您想到DOM树的方式相同,您可以想到“范围树”。另一方面,服务只是可以在任何地方注入和使用的单例对象。它们与DOM /范围树没有隐式关系。
通过将$ rootScope注入DeptFactory,您可以访问整个范围树。当您调用$ broadcast()时,您将在整个树中发送一个事件,从根开始,然后向外传播到所有叶子范围。
我没有看到足够的代码来完全理解正在发生的事情,但我猜你看到你所有的手风琴div都发生了变化,因为他们都收到了你的广播事件,并对它做出同样的反应办法。我建议你$广播某种ID值来识别你想要改变的div。然后,当您在每个手风琴中处理此事件时,请根据手风琴的ID检查ID,看它是否应该更改。
这有帮助吗?