angularjs – 将角度注入角度服务函数()
我有一个服务:
angular.module('cfd') .service('StudentService',[ '$http',function ($http) { // get some data via the $http var path = 'data/people/students.json'; var students = $http.get(path).then(function (resp) { return resp.data; }); //save method create a new student if not already exists //else update the existing object this.save = function (student) { if (student.id == null) { //if this is new student,add it in students array $scope.students.push(student); } else { //for existing student,find this student using id //and update it. for (i in students) { if (students[i].id == student.id) { students[i] = student; } } } }; 但是当我调用save(),我没有访问$ scope,并获得ReferenceError:$ scope没有定义。所以逻辑步骤(对我来说)是为$ scope提供save(),因此我也必须提供/注入到服务。所以如果我这样做: .service('StudentService','$scope',function ($http,$scope) { 我得到以下错误:
错误中的链接(哇,那是整洁!)让我知道它是与注射器相关,并可能与声明的js文件的顺序。我已经尝试在index.html中重新排序他们,但我认为这是更简单的,如我注射他们的方式。 使用Angular-UI和Angular-UI-Router
你看到注入到控制器的$ scope不是一些服务(像注入的东西的其余部分),但是一个Scope对象。可以创建许多范围对象(通常原型从父范围继承)。所有作用域的根是$ rootScope,您可以使用任何作用域的$ new()方法(包括$ rootScope)创建一个新的子作用域。
范围的目的是“粘合在一起”您的应用程序的演示和业务逻辑。将$ scope传递到服务没有什么意义。 服务是使用(以及其他方式)共享数据(例如在多个控制器之间)并且通常封装可重用代码片段的单例对象(因为它们可以被注入并且在应用的任何部分提供他们需要它们的“服务”:控制器,指令,过滤器,其他服务等)。 我相信,各种方法会为你工作。一个是: 基于上述方法,您的代码可能如下所示: angular.module('cfd',[]) .factory('StudentService',['$http',function ($http) { var path = 'data/people/students.json'; var students = []; /* In the real app,instead of just updating the students array * (which will be probably already done from the controller) * this method should send the student data to the server */ var save = function (student) { if (student.id === null) { students.push(student); } else { for (var i = 0; i < students.length; i++) { if (students[i].id === student.id) { students[i] = student; break; } } } }; /* Populate the students array with students from the server */ $http.get(path).success(function (data) { data.forEach(function (student) { students.push(student); }); }); return { students: students,save: save }; }]) .controller('someCtrl',['$scope','StudentService',function ($scope,StudentService) { $scope.students = StudentService.students; $scope.saveStudent = function (student) { // Do some $scope-specific stuff // Do the actual saving using the StudentService StudentService.save(student); // The $scope's `students` array will be automatically updated // since it references the StudentService's `students` array // Do some more $scope-specific stuff,// e.g. show a notification }; } ]); 使用这种方法时,你应该注意的一点是不要重新分配服务的数组,因为任何其他组件(例如范围)将仍然引用原始数组,你的应用程序将中断。 /* DON'T DO THAT */ var clear = function () { students = []; } /* DO THIS INSTEAD */ var clear = function () { students.splice(0,students.length); } 另见,short demo。 小数更新: 几个字,以避免在谈论使用服务时可能出现的混乱,但不是使用service()函数创建它。 引用docs on
基本上,它说的是每个Angular服务使用$ provide.provider()注册,但是有更简单的服务(其中两个是service()和factory())的“快捷方式”方法。 BTW,提供商vs服务vs工厂是Angular新手的最混乱的概念之一,但幸运的是有很多资源(这里是SO),使事情更容易。 (只搜索。) (我希望清除它 – 让我知道,如果它不)。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- angular – ViewDestroyedError:尝试使用已销毁的视图:de
- 对WebService的一些封装技巧总结
- Angular2 – 将routerLink参数添加到选定的表值
- twitter-bootstrap – 在使用Angular.js的Twitter Bootstra
- 为什么Scala在解包元组时会构造一个新的元组?
- wget 下载整个网站,或者特定目录
- webservice 2014-1-21
- bootstrap, boosting, bagging 几种方法的联系
- 如何使用设备映射器将docker容器移动到另一台计算机而不使用
- CXF创建WebService实例,与maven和spring整合