详解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 相关文章推荐
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 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数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
js function使用心得
2010/05/10 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
layui使用label标签的方法
2019/09/14 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
wxPython学习之主框架实例
2014/09/28 Python
python插入排序算法实例分析
2015/07/03 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
opencv实现图像平移效果
2021/03/24 Python
委托证明的格式
2014/01/10 职场文书
科研先进个人典型材料
2014/01/31 职场文书
意向协议书范本
2014/04/23 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
公司规章制度范本
2015/08/03 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
python基础之//、/与%的区别详解
2022/06/10 Python