详解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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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入门源程序
2006/10/09 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
js date 格式化
2017/02/15 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
详解python调度框架APScheduler使用
2017/03/28 Python
Python实现繁?转为简体的方法示例
2018/12/18 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
如何利用python发送邮件
2020/09/26 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
服务承诺书怎么写
2014/05/24 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
受伤赔偿协议书
2014/09/24 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
青年联谊会致辞
2015/07/31 职场文书
网络研修随笔感言
2015/11/18 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏