详解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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Python里隐藏的“禅”
2014/06/16 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python算法题 链表反转详解
2019/07/02 Python
Python数学形态学实例分析
2019/09/06 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
中餐厅经理岗位职责
2014/04/11 职场文书
设计师求职信
2014/07/01 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书