详解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 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
浅谈React高阶组件
Mar 28 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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代码
2010/08/08 PHP
PHP session有效期session.gc_maxlifetime
2011/04/20 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
javascript json2 使用方法
2010/03/16 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
市场部专员岗位职责
2013/11/30 职场文书
房地产出纳岗位职责
2013/12/01 职场文书
军训的自我鉴定
2013/12/10 职场文书
初中学生期末评语
2014/04/24 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
校外活动方案
2014/08/28 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
MySQL空间数据存储及函数
2021/09/25 MySQL
MySQL 数据类型详情
2021/11/11 MySQL
python基础之//、/与%的区别详解
2022/06/10 Python