三种AngularJS中获取数据源的方式

JavaScript 2019-01-04

在AngularJS中，可以从$rootScope中获取数据源，也可以把获取数据的逻辑封装在service中，然后注入到app.run函数中，或者注入到controller中。本篇就来整理获取数据的几种方式。

app.run(function($rootScope){
$rootScope.todos = [
{item:"",done:true},{item:"",done:false}
];
})

<div ng-repeat="todo in todos">
{{todo.item}}

以上，把数据源放在$rootScope中的某个字段中，很容易被重写。

})

app.run(function($rootScope,TodoService){
$rootScope.TodoService = TodoService;
})

<div ng-repeat="todo in TodoService.todos">
{{todo.item}}

在html中似乎这样写比较好：

在service中增加一个方法：

this.addTodo = fucntion(newTodo){
this.todos.push({item:newTodo,done:false})
}

})

在对应的html中：

在实际项目中，service还需要和服务端交互。

app.service("TodoService",function($q,$timeout){
this.getTodos = function(){
var d = $q.defer();

//模拟一个请求
$timeout(function(){
  d.resolve([
    {item:"",done:false},...
  ])
},3000);

return d.promise;

}

this.addTodo = function(item){
this.todos.push({item:item,done:false});
}
})

app.controller("TodoCtrl",function(TodoService){
var todoCtrl = this;

TodoService.getTodos().then(function(result){
todoCtrl.todos = result;
})

todoCtrl.addTodo = TodoService.addTodo;
})

以上就是AngularJS中获取数据源的方法，希望对大家的学习有所帮助。

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图，：视图模...

js实现横向跑马灯效果

首先我们需要一个html代码的框架如下：我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...

相关文章