详解AngularJS controller调用factory


Posted in Javascript onMay 19, 2017

1、定义 factory.js 文件

var appFactorys = angular.module('starter.factorys', []) 
appFactorys.factory('HouseFactory', function () { 
  var houseList = [ 
    { id: 0, title: '急售北二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/ben.png' }, 
    { id: 1, title: '急售东二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/max.png' }, 
    { id: 2, title: '急售南二环 小区配套齐全 精装修', price: '87.0', describe: '2室1厅 120平米', img: 'img/adam.jpg' }, 
    { id: 3, title: '急售西二环 小区配套齐全 精装修', price: '86.0', describe: '2室1厅 120平米', img: 'img/perry.png' }, 
    { id: 4, title: '急售北二环 小区配套齐全 精装修', price: '85.0', describe: '2室1厅 120平米', img: 'img/mike.png' } 
  ]; 
  return { 
      all: function () { 
        return houseList; 
      }, 
    }; 
});

2、在 app.js 文件引用 factory.js 文件

angular.module('starter', ['ionic', 'ngCordova', 'starter.directives','starter.factorys','starter.services', 'starter.customControllers']) 

3、在controller中调用factory

appControllers.controller('HouseCtrl', function ($scope, $timeout, $ionicModal, $ionicActionSheet, $http, $cordovaToast, $ionicLoading, HouseFactory) { 
  // $scope.houseList = [ 
  //   { id: 0, title: '急售北二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/ben.png' }, 
  //   { id: 1, title: '急售东二环 小区配套齐全 精装修', price: '88.0', describe: '2室1厅 120平米', img: 'img/max.png' }, 
  //   { id: 2, title: '急售南二环 小区配套齐全 精装修', price: '87.0', describe: '2室1厅 120平米', img: 'img/adam.jpg' }, 
  //   { id: 3, title: '急售西二环 小区配套齐全 精装修', price: '86.0', describe: '2室1厅 120平米', img: 'img/perry.png' }, 
  //   { id: 4, title: '急售北二环 小区配套齐全 精装修', price: '85.0', describe: '2室1厅 120平米', img: 'img/mike.png' } 
  // ]; 
 
  /* 调用Factory.js数据 */ 
  $scope.houseList = HouseFactory.all(); 
 
})

4、html页面调用

<ion-list> 
  <ion-item class="item item-thumbnail-left" ng-repeat="item in houseList" href="#/housedetail/{{item.id}}" rel="external nofollow" style="padding--bottom:2px"> 
    <img ng-src="{{item.img}}"> 
    <h2>{{item.title}}</h2> 
    <dd class="assertive cus-price">{{item.price}}万元</dd> 
    <dd class="u-f-h4">{{item.describe}}</dd> 
  </ion-item> 
</ion-list>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中encodeURI和decodeURI方法使用介绍
May 06 Javascript
javascript的函数作用域
Nov 12 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
layer弹窗插件操作方法详解
May 19 #Javascript
layui选项卡效果实现代码
May 19 #Javascript
bootstrap table单元格新增行并编辑
May 19 #Javascript
layui弹出层效果实现代码
May 19 #Javascript
layui分页效果实现代码
May 19 #Javascript
layui前段框架日期控件使用方法详解
May 19 #Javascript
详解Node.js开发中的express-session
May 19 #Javascript
You might like
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
JavaScript 题型问答有答案参考
2010/02/17 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python实现的个人所得税计算器示例
2018/06/01 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
汽车维修专业个人求职信范文
2014/01/01 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
犯错检讨书
2014/02/21 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
社会发展项目建议书
2014/08/25 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers